jQuery live() not working.. probably doing it wrong?

Question

I have a paged list of items, each with a checkbox associated with it.

If I click a checkbox, I write that checkbox's id to a cookie. When the page reloads, i want to re-check all the previously selected checkboxes.

This works fine with the following code:

$('.fund-compare-check-box').each(function () {
    var cookie = getCookie("fund_basket").split("|");

    // re-check all check boxes
});

The problem I have with this, is when I load the next page of results. The code above only runs when the DOM is ready.

I thought I could fix this by using .live() instead of .each(), as follows:

$('.fund-compare-check-box').live('each', function () {
    var cookie = getCookie("fund_basket").split("|");

    // re-check all check boxes
});

but when I use this, nothing happens at all. Am I doing this wrong? Any pointers would be much appreciated!

Answer 1

jQuery.live only works on events, and "each" is not an event. In addition, jQuery.live only works on most events, some are not supported. See reference:

http://api.jquery.com/live/

Live supports custom events, so you can try something like this:

$('.myClass').live('onCreated', function() {
    doSomething();
});

And then make sure to call the "onCreated" event manually when you've created new elements.

$(newElementsOnly).trigger('onCreated');

Doing it this way consolidates your "new element" logic into one location, and you can just trigger the onCreated event if you add elements dynamically for any reason (ajax response, or 'add element' button click).

Here's a weird jsFiddle example: http://jsfiddle.net/xixionia/YshhU/

Answer 2

live is for binding event handlers to elements that may or may not currently exist. The first argument is the event type. Your code binds a function to the each event on elements that match your selector. Obviously, the each event does not exist.

You probably want your code to be executed after every AJAX query (I'm presuming your elements are being added through AJAX). If this is the case, you may like to use ajaxComplete:

$(document).ajaxComplete(function() {
    $('.fund-compare-check-box').each(function () {
        var cookie = getCookie("fund_basket").split("|");

        // re-check all check boxes
    });
});

If your content is added in a different way, you'll have to figure out some way to call that function each time the content is added.

Answer 3

live() is useful when you need to attach new events to objects in the future; the each function of jQuery is not an event. In your situation, you should extract this logic to a method and simply call that when the page is loaded; and again when you load a new page of results.

Answer 4

The purpose of the live() function is to allow you to attach event handlers to items when they become available in the DOM, not for traversing or looping through elements when they become available.

Answer 5

The live function listens for events that happen to elements that are added after the page is loaded. You'll have to call

$('.fund-compare-check-box').each(function () {
    var cookie = getCookie("fund_basket").split("|");

    // re-check all check boxes
});

again when you add new checkboxes that you want to check against the cookie.

Answer 6

if you want recheck these checkboxs then you should do it server-side.