on change event not working [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
1) The code(Change Event) that is not working is:
$(document).on('change','select[name="id"]',function(){
alert('Not Working');
});
2) The code(Change Event) that is working is:
$(document).on('change',$('select[name="id"]'),function(){
alert('Working');
// Here $(this).val() not working for get value.I want to use $('select[name="id"]').val()
});
Doubts:
a) Why Is First change event not working?
b) Second change Event is Working, But $(this).val() is not working.
Can you please explain the difference between above 2 functions?

In order to handle select element change:
$('select[name="id"]').on('change',function(){
alert($(this).val());
});
For dynamically created elements use:
$(document).on('change','select[name="id"]',function(e){
alert($(e.target).val());
});
As you see, in that case e.target.val() should be used ( e.target wrapped into $() in order to get it as a jquery object )

I'm not sure why your first example doesn't work as I think it should, however the second example will have this scoped to document instead of the select.
The following will scope this to the select.
$('select[name="id"]').on('change', function (){
$(this).val()
});

Related

Js script not update index element html [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I'm stuck with the DOM. When the search button is pressed, JS script will inject element1, and there is a new function (A) that appears after injecting element1.
I changed the class name on element1 to element2. When I want to run function(A) a bug occurs, which function(A) still indexes element1, not element2. How can I fix it?
$('.search').click(function() {
$('button').after('<div class="a b">New div element here!</div>')
// in actual this code will run by click button and this code working
$(this).siblings().last().toggleClass("b")
// this code is not triggered, it should be triggered
$('.a:not(.b)').click(function() {
console.log('clickety click');
})
})
.b {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="search">search</button>
When you bind the events, they stay bound until they are unbound from the element. So if you want to "clean" your event bindings, you can use jQuery unbind() before binding new events:
$('your.selector').unbind().click(...
Another workaround is performing a class check inside the click function callback, to be sure if the element still has (or still hasn't) some class. Just be sure if you need or not to call some kind of preventDefault() to get a better control because button element does have a default behavior.
$('.a').click(function () {
if ( ! $(this).hasClass('b') ){
// Do things with .a elements that don't have .b class
}
})

how to move a "li" tag into another "ul" tag without removing the first "li"? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
how to move a "li" tag into another "UL" tag without removing the first "li"?
$(document).ready(function () {
$("#id").click(function () {
$("#id li").last().replace('#id li');
});
});
also I use this code but didn't work.
You can use jquerys clone() method to "copy" the element
$(document).ready(function () {
$("#id").click(function () {
$("#id li").last().clone().appendTo('.anotherElement')
});
});

How can I enable a fieldset? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Normal disclaimer that I'm a terrible web developer.
I was lead to believe that, with a <fieldset disabled id="homeFieldset">...</fieldset>, I could enable its controls with $("homeFieldset").disabled = false, but alas...nothing. Also, I'm testing this in Chrome, where it should work. Fiddle: https://jsfiddle.net/ggrxx4hm/1/
FWIW, debugging shows me that $("#homeFieldset").disabled is undefined. However, if I do $("#homeFieldset")[0].disabled = false, it works. Fiddle: https://jsfiddle.net/7edje5vk/
Edited selector in second paragraph.
Edit again: But why doesn't .disabled = false work?
Answer to that via #mplungjan in the comments below: "jQuery objects do not have a disabled attribute. DOM objects do. $("#homeFieldset").disabled=false is not valid jQuery, document.getElementById("homeFieldset").disabled=false; is valid DOM manipulation"
JS Fiddle
$("#homeFieldset").prop('disabled', false);
It will work in any of these ways.
$("#homeFieldset")[0].disabled = false; // accessing the DOM object
OR
$("#homeFieldset").attr('disabled',false); // using the jQuery attr
Your code doesnt work since you have to tell jquery to change Attribute.
for enable
$("#homeFieldset").prop('disabled', false);
and for disable
$("#homeFieldset").prop('disabled', true);
Your jQuery selector is wrong. Use $("#homeFieldset") - note the # in the selector.
Read more on jQuery selectors here: jQuery API

'toggleClass' not working on every other div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/
You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});

Check if one of my select tag as change with same class [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have few select withs the same class, I want to manipulate the changed select.
I tried:
$(".test_suite").change(function (event) {
val = $(this).val()
});
but the this work only on the first select.
maybe each will resolved the issue?
any assist will help :)
thanks,
Cfir.
It works for me: http://jsfiddle.net/wy907kbp/4/
$('.test_suite').on('change', function (event) {
console.log($(this).val());
});
You said that want to modify selected value, which you need to explain more.
$(".test_suite").change(function (event) {
val = $(event.target).val()
});

Categories

Resources