Question

I’m not sure how to bind to content loaded via Ajax and traverse through it to see if any new elements have been added. Here is the code I have currently (jQuery):

jQuery(document).ready(function($) {

    $(document).find('.my-selector').each(function() {
        if ( $(this).is(':checked') ) {
            $(this).parent().parent().next().show();
        } else {
            $(this).parent().parent().next().hide();
        }
    });

});

I know this won’t bind to future content loaded via Ajax, but I don’t know exactly how to bind traversing. I’ve tried using $(document).on('ajaxStop') and then traversing, but that doesn’t seem to work for me. I can’t use .on('click') or any of the other usual events like that because the new content isn’t loaded yet.

Any way to do this? The code above works great for content already on the page, so I just need it modified to where it will bind to future .my-selector elements as well.

UPDATE

I’ve fixed the issue. It stemmed from loading the content via Ajax through a callback function within the fadeIn method. Apparently jQuery won’t traverse through DOM elements that are not yet fully visible. I simply changed the method from fadeIn to show and it works fine when binding to the ajaxStop event with on(). Here is the updated code for anyone wanted to know:

$(document).on('ajaxStop', function() {
    $(this).find('.my-selector').each(function() {
        if ( $(this).is(':checked') ) {
            $(this).parent().parent().next().show();
        } else {
            $(this).parent().parent().next().hide();
        }
    });
});

Answer 1

Works for me perfectly with ajaxStop() event.

Here’s a working sample (with console.log(), so use a browser that will not choke on them):

http://jsfiddle.net/uyMJZ/