2

很多时候,我的元素与附加功能挂钩,例如:

$('.myfav').autocomplete();
$('.myfav').datepicker();
$('.myfav').click(somefunction);

但是当通过一些代码动态生成这个类的更多实例时,新$('.myfav')的已经死了,需要重新布线,所以我这样做:

$("#somelink").click(function(){
     //generate 10 new $('.myfav') and append them to the DOM
     //re-wire them again as in the block above
     $('.myfav').autocomplete();
     $('.myfav').datepicker();
     $('.myfav').click(somefunction);
});

这意味着我最终拥有 2 个相同的代码块,1 个用于初始页面加载,另一个用于重新连接动态生成的新元素。这不是 DRY 代码,效率不高。

这真的是完成这项工作的唯一方法,还是有其他最佳实践?我的直觉告诉我必须有比这更有效的东西(也有助于 DRY 代码)。

更新

看起来 .live 与 .click 配合得很好,正如 cletus 所解释的那样。

$('.myfav').live("click", somefunction);

但我尝试使用自定义设置插件,如 .autocomplete,但没有成功。我试过这个:

$('.myfav').live("click", autocomplete("somefile.php", {max: 15, mustMatch: true}));

所以 live 看起来不能处理这些自定义插件(当然我可能是错的,如果你知道的话请更新)

4

4 回答 4

3

使用live()

$(".myfav").live("click", somefunction);

这会将事件处理程序绑定到调用后动态创建的元素live()

于 2009-10-17T05:49:59.730 回答
3

.live() 文档说...

.live 不支持 liveQuery 提供的无事件样式回调。只有事件处理程序可以与 .live 绑定。

所以我看了一下liveQuery,我认为它可以完全满足您的需求,如下所示:

$('.myfav').livequery(function() {
  $(this).autocomplete();
  $(this).datepicker();
  $(this).click(somefunction);
});

看起来很方便!

于 2009-10-17T08:29:10.427 回答
2

认为您可以使用 live();,但不能使用您的编写方式。

您当前的实施:

$('.myfav').live("click", autocomplete("somefile.php", {max: 15, mustMatch: true}));

这将立即执行自动完成,而不是当 jQuery 找到带有 class="myfav" 的新元素时

您应该使用以下语法:

$('.myfav').live("click", function () {
    $('.myfav').autocomplete("somefile.php", {max: 15, mustMatch: true})
});

您可以在匿名函数中使用所有正常的语法、函数等。

我认为这会起作用,但我还没有测试过。它的作用是向 jQuery 发送一个函数,以便稍后在 click 事件触发时执行。

于 2009-10-17T06:34:48.267 回答
1

在这种情况下,我通常会发现自己使用一个执行绑定/解除绑定的 init 函数,然后在 ajaxComplete 等上调用它。在这种情况下,它可能看起来像这样:

function init()
{
    $('.myfav').unbind('click');
    $('.myfav').autocomplete('disable');
    $('.myfav').datepicker('disable');
    $('.myfav').autocomplete();
    $('.myfav').datepicker();
    $('.myfav').click(somefunction);
}

当然,根据插件的不同,unbind 可能看起来不同,我相信 jQueryUI 使用 $('.myfav').draggable('destroy') 例如。

于 2009-10-17T12:50:14.403 回答