jQuery-遍历自定义事件中的动态元素

Question

我在这里碰到了一堵砖墙。 我当前项目的前一位开发人员决定使用一个庞然大物的JS文件构建此应用程序的整个前端部分，而几乎没有html用于页面结构。 因此，基本上，应用程序上的所有内容和结构都是动态生成的。

我已经学会了使用这个18k +行的JS文件，但是我终于遇到了一些障碍。 我需要在带有className .grid_elm的其他元素数组中找到特定元素，并且需要触发一个click事件。

当前HTML：

<div id="grid">
   <div id="gridMask">
      <div id="mCSB_1"> /*Auto-Generated by a Scrollbar Plugin*/
         <div class="mCSB_conatiner"> /*Auto-Generated by a Scrollbar Plugin*/
            <div class="holder">
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
            </div>
         </div>
      </div>
   </div>
</div>

问题：

每当用户从自动建议的搜索框中选择一个选项时，就会用新的元素刷新#grid 。 然后，我需要遍历每个.grid_elm元素，并基于其子元素找到一个特定的元素，然后触发对该特定.grid_elm的单击-但由于不存在特定的元素，我不知道如何执行此操作从中传播事件。 我无法真正将每个.grid_elm元素都订阅一个自定义事件，然后在将元素添加到#grid时触发该自定义事件，因为该触发将发生在所有.grid_elm元素上，或者因为该触发可能发生需要一些更具体的东西来触发。 如果我这样做：

$("#grid").on("click",'.grid_elm",function(){
   $(".grid_elm").each(function(){
      console.log($(this));
   })
})

我可以获取元素列表，因为该事件是从特定元素触发的，但是如果在触发自定义事件时尝试遍历每个元素，我将一无所获：

$("#grid").on("custom",".grid_elm",function(){
   $.each($(".grid_elm"),function(){
      console.log($(this));
   })
})

//"custom" Event is fired after grid refreshes with new content
$(".grid_elm").trigger("custom");

即使我订阅并直接触发事件#grid没有任何参考.grid_elm ，然后通过它的孩子尝试循环，我还是什么也没得到。 我觉得我缺少有关自定义事件处理的基本知识。

Answer 1

使用此jsfiddle似乎可以正常工作：

http://jsfiddle.net/KEMrX/具有以下javascript：

$("#grid").on("custom",".grid_elm",function(){
   $.each($(".grid_elm"),function(){
      console.log($(this));
   })
})

//"custom" Event is fired after grid refreshes with new content
$(".grid_elm").trigger("custom");

和HTML代码：

<div id="grid">
   <div id="gridMask">
      <div id="mCSB_1"> 
         <div class="mCSB_conatiner"> 
            <div class="holder">
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
            </div>
         </div>
      </div>
   </div>
</div>

如果在运行控制台后查看控制台，则会看到正确打印出.grid_elm元素。

您很可能在生成内容而不是自定义事件处理方面遇到问题。 #grid元素何时创建？ 什么时候运行将事件附加到#grid元素上的代码？

编辑：重要的部分是：附加事件的代码应该直接在将#grid元素创建（并附加）到页面上的代码之后发生。 否则，表达式$（“＃grid”）将返回一个空数组，并且.on（）函数将不会在任何对象上运行。