6

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/

Improve this question
5
  • possible duplicate of jQuery - Click event doesn't work on dynamically generated elements 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. 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? 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. 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? Commented Oct 5, 2013 at 0:43

4 Answers 4

Reset to default
11

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

18 Comments

It's not a big deal, but any comments on -1? You might point to my mistake, if any, so that I became a better developer.
Yeah sure, I'm not down-voting just because I answered, I down-voted because you are stating that you need to apply it to the closest element, in other words stating that our answers are incorrect when they're not. You do not need to apply it to the closest element, that's wrong. Other than that it's a good answer
@Connor: so you don't think that specifying a closest element is better? Btw, I specified "to as close to the target elements as possible" - and it's not "that's wrong", it's a correct advice
You are not saying it's better, you're saying you need to do that. Yes it is probably better.
Wow. I was going to comment that "need to" is incorrect, and that "it is better to" would be correct, and then I saw the argument that you guys have already had over that very thing. I wouldn't downvote over it, but the word "need" means "requirement", that is, something that must be there in order for it to work. Putting the handler on an element close to the target is definitely better, that is good advice, but it's not something you need to do.
|
3

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

Improve this answer

Comments

3

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

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

1 Comment

Connor's edit formatted the code as code. (If you click on the "edited x mins ago" link you can see what changed.)
1

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!
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.