JQuery-在自定义事件上循环动态元素

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

我已经学会了使用这个18k+行JS文件，但我最终遇到了一些障碍。我需要在className

.grid\u elm

的其他元素数组中找到一个特定的元素，并需要触发一个单击事件

当前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").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\u elm

，然后尝试循环它的子项，我仍然一无所获。我觉得我缺少了一些关于自定义事件处理的基本知识。

这似乎可以与此JSFIDLE一起使用：

它具有以下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”）将返回一个空数组，.on（）函数将不会在任何对象上运行。

我想您可能就在这里，因为我调用的函数似乎是要用新的

更新网格。grid\u elm

元素可能再次注入整个

#grid

，这意味着，当我订阅事件页面加载上的网格元素时，新注入的

#网格
也需要以某种方式订阅？我应该将事件侦听器附加到DOM树更高的元素上吗？甚至是尸体？我会试试这个，让你知道会发生什么！将事件侦听器附加到DOM树更高的元素上应该可以工作。如果这不起作用，您可能需要在注入#网格元素时将事件重新订阅到该网格元素。结果表明，即使在将新元素注入
#网格
之后，我的事件订阅仍在工作-但当我的自定义事件激发并触发回调时，这些元素显然还没有准备好？我通过在元素中开始循环之前添加一个超时来解决这个问题，但是必须有一种更优雅的方式吗？看起来很俗气，我已经知道这可能会变得不一致，因为你说元素还没有准备好是什么意思？通常，这些超时修复只在涉及AJAX调用时起作用。是这样吗？元素是否仅在AJAX调用后创建？调用是使用node.js进行的，但信息是从服务器提取的是。很抱歉，我忘了提到这一点，我认为这与此无关，因为说实话，这个应用程序的设置方式非常复杂，要解释在我的jquery代码执行之前发生了什么太难了，哈哈。我不打算公布我的答案，因为我解决这个问题的方式对这个应用程序的结构太具体了，在我的书中，它几乎不能被认为是一个“修复”。相反，我会接受你的建议，因为你所说的让我直指问题所在。
<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>