通过侦听自定义事件 (JavaScript) 来查找动态生成的元素

Question

我有一个列表，其li是通过AJAX动态生成的：

<ul>
  <li id="hello"></li>
  <li id="world"></li>
  <li id="helloWorld"></li>
</ul>

我的脚本中还有一个全局变量，如下所示：

var world = 'world';

我希望在文档准备就绪时，一旦加载列表，就找到与我的全局 var 具有相同 id 的li项：

$('ul').find('#' + world);

我不能在这里使用传统的.on()事件侦听器，因为除了加载本身的结束之外，没有其他事件可以触发它。

所以我的下一步是在我的加载脚本中触发一个自定义事件：

$('ul').trigger('loadingDone');

然后听听：

$('ul').one('loadingDone', theFunctionThatDoesTheSearch );

问题是，这失败了，它完全忽略了任何生成的元素。

我知道一个可能的解决方案是在 ajax 调用的成功方法中运行这些操作，但我正在构建的应用程序的当前架构不允许这样做。(我可以并且确实在成功的AJAX方法中触发事件，我只是无法在那里进行搜索(

基本上，我要求的是允许加载脚本在完成时让我知道的替代解决方案，以及通过过滤生成的内容而不在加载脚本本身中进行过滤的方法。

Answer 1

$(document).on("customevent","ul",function(){
console.log("event triggered from inside the ajax success handler");
});
$.ajax({
    url:'/echo/json/',
    success:function(){
    $('div').append("<ul><li>asd</li></ul>");
        $("ul").trigger("customevent");
    }
});

http://jsfiddle.net/xp7sr/2/

Answer 2

如果你的 ajax 请求是通过 jquery 执行的，你可以尝试 http://api.jquery.com/ajaxComplete/。