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

【问题标题】：Find a dynamical generated element by listening to a custom event (JavaScript)通过侦听自定义事件 (JavaScript) 查找动态生成的元素
【发布时间】：2012-05-15 20:15:29
【问题描述】：

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

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

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

var world = 'world';

我希望在文档准备就绪后，在列表加载后立即找到与我的全局变量 id 相同的 li 项目：

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

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

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

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

然后听一听：

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

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

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

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

【问题讨论】：

它使用什么ajax函数？您将需要从成功函数（或成功事件的任何其他处理程序）触发事件，为什么这是不可能的？
我这样做了，但它仍然不起作用......可以在那里触发事件，只是不要在里面运行搜索。
那么请给我们看一下不起作用的代码，您似乎使用了正确的方法。

标签： javascript jquery event-handling eventtrigger

【解决方案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/

【讨论】：

是的，这就是我卡住的地方。我触发了事件，我成功收听了，但是还是找不到元素...
我修复了它，不完全确定问题出在哪里，但我认为这与我收听事件的方式有关。当我将文档设置为 .on() 侦听器的第一个参数并将 ul 作为第二个参数时，它起作用了...

【解决方案2】：

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

【讨论】：