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: /

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/

• javascript
• jquery

• possible duplicate of jQuery - Click event doesn't work on dynamically generated elements – Ram Commented Oct 4, 2013 at 23:47
• 3 What the answers below are implying is that the jQuery selector you're using needs to exist. But .on() also has a second parameter for a target element selector. In the case of dynamically added elements, the primary selector should be a common static (non-changing) parent element (anywhere up to 'body' or document if necessary), and the second argument to .on() should be the selector for the dynamic target element. – David Commented Oct 4, 2013 at 23:52
• @David: "What the answers below are implying is that the jQuery selector you're using needs to exist." --- ? All the answers below use delegation. Are you sure in what you said? – zerkms Commented Oct 4, 2013 at 23:58
• @zerkms: Yes, but they don't all really explain the structure of it. I just figured I'd add to the explanation without adding a whole answer. Usually I find that people new to delegation with .on() can get it to work, but don't really understand why it does what it does. Just hoping to help the OP a little more. – David Commented Oct 5, 2013 at 0:01
• "I read through a couple posts and found out that I need .on("click, function())...However, this method still doesn't work" - Did you think of reading the actual jQuery .on() documentation? – nnnnnn Commented Oct 5, 2013 at 0:43

4 Answers 4

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.

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

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

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

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!