正确处理 jQuery 的 .live()

Question

我目前正在尝试进入 jQuery。我遇到了困难（-；

现在我正在尝试通过 .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;
}

，这工作得很好，所有内容都正确显示。我正在加载的页面中有很多复选框，我想要能够用一个特殊的复选框来切换它们（#check_all 检查 .to_be_checked）。

好吧，这个函数工作正常，但它不适用于 ajax 加载的内容，

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'));
 });
}

我知道我必须使用 .live() 。选择加载的内容（使用 check_all.live() 工作正常）。问题是 .to_be_checked 类不受影响，我希望在这种情况下如何使用 live() 函数来选择它们

。你们可以帮助我（：

最诚挚的问候！

Answer 1

您需要在 live 处理程序中再次运行 DOM 查询：

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

这是因为在分配 to_be_checked 时，它包含分配时 DOM 查询的结果，这不是期望的行为。

如果您在处理程序内再次运行查询，您将获得所需的结果。

Answer 2

您的问题存在标准关闭问题， to_be_checked 是在 live 函数之外定义的，因此是在 live() 事件最初绑定时设置的，并且稍后不会更新。在 live() 调用中再次使用选择器。

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

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

Answer 3

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'));
 });
}

在此代码中，您正在缓存“.to_be_checked”的选择器。这对于选择器来说通常是个好主意，但在通过 AJAX 加载内容时则不然。这里发生的事情是，当定义“to_be_checked”时，它会在 DOM 中搜索具有该类的所有元素，创建对象并创建对象，仅此而已。

你想要做的就是这样：

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