CODEWITHSUNDEEP
javascriptjquerylive
Victor
Victor

Reputation: 1271

Live events in jQuery 1.7+

I am trying to use the on method for future DOM elements, but for some reason instead of calling events on click, it fires them when the DOM objects are dynamically created.

here's the code that I have. 

$("#checkbox1").on('click', toggleChecked(this.checked)); //this is included in Ajax call success method


function toggleChecked(status) {
    $(".item").each(function () {
        $(this).prop("checked", status);
    });
}

What am I doing wrong here?

Upvotes: 2

Views: 192

Answers (4)

Kris Erickson
Kris Erickson

Reputation: 33854

As people have pointed out, you are doing the function wrong (the function has to be an anonymous function or a pointer to a function, or string that points to a function). But you are also using 'on' method wrong, it is not exactly the same as the 'live' method. You watch the document (or an area of the document), and have a subselector in that. 

$(document).on('click', "#checkbox1", function() {
    var status = this.checked;
    $(".item").each(function () {
        $(this).prop("checked", status);
});

Note: If all your checkboxes are getting created in the 'checkBoxDiv' your selector can be:

$("#checkBoxDiv").on('click', "#checkbox1", ...

For more information about how to use 'on' see the comparison in functions in the 'live' documentation (about 1/3 of the way down the page).

From the documentation:

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery
1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+

The events argument can either be a space-separated list of event type names and optional namespaces, or an event-map of event names strings and handlers. The data argument is optional and can be omitted. For example, the following three method calls are functionally equivalent (but see below for more effective and performant ways to attach delegated event handlers):

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+    
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+ 
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30676

Two problems:

  • By adding parenthesis, you are executing the function, you have to pass a reference to the function to .on()

  • You cannot pass parameters like you want to do. But this in the event handler will be the clicked DOMElement, so you can get the checked property value inside it with this.checked

Here's a modified code:

$("#checkbox1").on('click', toggleChecked);


function toggleChecked() {
    // "this" here is the clicked element
    var status = this.checked;
    $(".item").each(function () {
        // be careful in .each() 'this' is the currently iterated element
        $(this).prop("checked", status);
    });
}

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69915

toggleChecked(this.checked) will right away execute the function and then on will get its return value as handler which is undefined.

Wrap it an anonymous function so that it will be called when you click on the checkbox.

$("#checkbox1").on('click', function(){
   toggleChecked(this.checked)
});

If you use toggelChecked method directy as click handler you can get the checked status of the checkbox using `this.checked inside the handler.

Upvotes: 2

Rob W
Rob W

Reputation: 349262

You have to put the event listener within function literals. Otherwise, the function is directly called.

$("#checkbox1").on('click', function() {
    toggleChecked(this.checked);
});

The function itself can be written more efficiently:

function toggleChecked(status) {
    $(".item").prop("checked", status);
}

Upvotes: 1

Related Questions