Question

I’m currently trying to get into jQuery. And I’m having a hard time (-;

Right now I’m trying to load a page via .load()

scan_music  : function ()
{
 var target = $('#crawl_results');

 target.load('/admin/scanner/crawl_product_ids/de/music #product_ids', function()
 {
  admin.hide_loading();
 });
 return false;
}

That’s working pretty fine and everything’s getting displayed correctly. The page I’m loading has lots of checkboxes in it and I want to be able to toggle them all with one special checkbox (#check_all checks .to_be_checked).

Well, that function works fine. But it doesn’t work for ajax-loaded content.

check_all_boxes : function ()
{
 var check_all  = $('#check_all'),
     to_be_checked = $('.to_be_checked');

 check_all.live('click', function ()
 {
  to_be_checked.attr('checked', check_all.is(':checked'));
 });
}

I know that I have to use .live() to select the loaded content (working fine with check_all.live()). The problem is that the classes .to_be_checked aren’t affected and I have no clue how to use the live() function to select them in that case.

I hope you guys can help me out (:

Best regards!

Answer 1

You need to run the DOM query again inside the live handler:

check_all.live('click', function ()
{ 
   $('.to_be_checked').attr('checked', check_all.is(':checked'));
});

This is because at the time to_be_checked is assigned, it contains the result of the DOM query at the time of assignment, which is not what is the desired behavior.

If you run the query again inside the handler, you will get the desired results.