JQuery change event not firing everytime

So this is a very weird problem and I would get something was wrong if my event was not being fired at all. But I have the following code that calls a function whenever a checkbox is checked:

$('input:checkbox').change(
function(){
filterByOptions();
});


filterByOptions basically adjusts the content on my page according to the checkboxes checked. Now what I want is for this function to be called everytime a checkbox is clicked on. But this is only happening sometimes (I would say like 50% of the times). I tried placing this code in different parts of my page including in a $(document).ready(function() { method and in separate script tags at the end of the page. But the problem persists.

$(document).ready(function() {

Can someone please offer a solution or tell me what I may be doing wrong?

2 Answers
2

You've indicated in the comments below that you are dynamically creating new elements and this would cause issues with event binding. The solution for that is to use event delegation, which is where you set up the event on a high level ancestor element the will always exist in the document and then, because most events bubble up to their ancestors, you handle the event there. But, when handling the event, you can examine the element where the event originated and make decisions based on that.

Next, don't use the change event with check boxes. Use the click event. The change event is meant to signal a change to the element's value, when you click on a checkbox, you aren't changing its value, you are changing its checked property. To more accurately trap a click, use the click event.

change

click

change

value

value

checked

click

And yes, the code should be inside of a document.ready() callback.

document.ready()

Also, it makes no sense to have your callback function consist solely of a call to another function. Just make filterByOptions the callback.

filterByOptions

Lastly, JQuery recommends the use of the on() method for event binding:

on()

$(function(){
// Set up the event on the ancestor
$('#parent').on("click", filterByOptions);

// Now, lets dynamically create a new checkbox.
// This element will be inserted into the element that is set up to handle bubbled events,
// so the new element will immediately respond to events even though it wasn't specifically
// bound.
$("#parent").append('<input type="checkbox" name="chk4" value="4" id="chk4" class="handle"><label for="chk4">Box 4</label>');

// All event handlers are automatically passed a reference
// to the event object that triggered them, it is a good idea
// to set up a named argument to reference it.
function filterByOptions(evt){
// Check to see if the event originated at an element you care about
// This is easily accomplished by checking for the class we set up earlier
if(evt.target.classList.contains("handle")){

// Do whatever you need to here, including checking if the box is or isn't checked
console.log(evt.target.name + " was clicked and is now" + (evt.target.checked ? " " : " not ") + "checked.");
}
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent">
<!-- If we give the elements that need handling a common class, it will be easier later-->
<input type="checkbox" name="chk1" value="1" id="chk1" class="handle"><label for="chk1">Box 1</label>
<input type="checkbox" name="chk2" value="2" id="chk2" class="handle"><label for="chk2">Box 2</label>
<input type="checkbox" name="chk3" value="3" id="chk3" class="handle"><label for="chk3">Box 3</label>
</div>

maybe can you double check are you imported jquer js file ? you may check in the log see got error return or not. Hope i can help on

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.