将 jQuery 实时搜索添加到动态输入答案

【问题标题】：Adding jQuery live search to dynamic inputs将 jQuery 实时搜索添加到动态输入
【发布时间】：2012-12-14 23:29:55
【问题描述】：

我正在使用 jQuery 实时搜索插件，需要将其绑定到类的所有实例。我的类实例可能是动态的，也可能不是动态的。

我知道我可以通过将它嵌套在一个 jQuery Live 函数中来完成将它绑定到动态类实例，例如 $(".myLink").live(click function(){});

但是，我还需要非动态类也具有绑定。

如何在不定义我的 liveSearch 绑定两次的情况下完成此操作？（一次在文档中为静态元素准备好，一次在我的点击处理程序中为动态元素准备好）。

这是我的 liveSearch 代码，不确定是否重要。

$(".myClass").liveSearch({
url: 'foo.php',
id: 'liveSearchID',
parent: '.myParent',
});

非常感谢。

【问题讨论】：

【解决方案1】：

您可以使用 jQuery .on() 绑定 liveSearch 以呈现（非动态）或未来的元素，例如：

$("#parentContainer").on("click", ".myClass", function(){
  $(this).liveSearch({
     // options
  }); // liveSearch
}); // on

注意，您必须将 .on() 应用于选择器 .myClass 的 父容器，然后将事件 .myClass 作为后代选择器传递，然后处理程序。

见DEMO

.on() 需要 jQuery 1.7+

编辑（2012 年 12 月 15 日 - 太平洋时间下午 4:13）：

旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live() ...所以只需以这种方式调整您的代码 .delegate(selector, eventType, handler)（仍然将 .delegate() 应用于父容器），例如：

$("#parentContainer").delegate(".myClass", "click", function() {
  $(this).liveSearch({
     // options
  }); // liveSearch
}); // delegate

使用.delegate()查看新的DEMO（需要jQuery v1.4.2+）

【讨论】：