JQuery .on（“click”，function（））不起作用

Question

I am trying to fire JQuery when I checkbox is checked. At first I realized my JQuery only works for static elements. I read through a couple posts and found out that I need .on("click, function()) in order to fire that same piece of javascript for dynamically added elements.

However, this method still doesn't work for me. Can anyone help? Thank you.

$(document).ready(function(){
    $("input[name='todo']").on('click', function(){
    var isChecked = this.checked
           if (isChecked == true){
          $(this).next().remove();
          $(this).remove(); 
        }
        if (isChecked == false)
        {
        alert("checkbox is NOT checked");
        }

        });

    });

My example app: http://jsfiddle.net/JSFoo/7sK7T/8/

Answer 1

You need delegation:

$('#ToDoList').on('click', "input[name='todo']", function() { ... });

http://jsfiddle.net/7sK7T/9/

Documentation: http://api.jquery.com/on/#direct-and-delegated-events

PS: the important note - you need to specify the element you're binding your handler to as close to the target elements as possible. In your case it's #ToDoList , not body or document as other answers advice.

Answer 2

For dynamic elements you would want to do something like this

$(document).ready(function () {
    $(document).on('click', "input[name='todo']", function () {
        var isChecked = this.checked
        if (isChecked == true) {
            $(this).next().remove();
            $(this).remove();
        }
        if (isChecked == false) {
            alert("checkbox is NOT checked");
        }

    });

});

if you use it like you were before on('click') is basically the same as click(); because you are still selecting the elements required and applying the event to those elements, the way the above example works is it is only applies the event to the document then checking the selector when the event is fired.

You can also change document to a close container of the elements to be clicked if you wish.

This is called Event Delegation

jQuery Learn Event Delegation

Answer 3

The below is what you needed. It is slightly different syntax

$(document).on('click', "input[name='todo']", function(){

Answer 4

You bind the elements on document ready, it's before they're created. You have to bind AFTER their creation.

Alternatively you can bind their container on document.ready:

$("#containerDiv").on('click', "input[name='todo']", function(){
   // .... your code
});

• "containerDiv" should be the parent element of those checkboxes, it should be in the page on document ready!