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时触发自定义事件，因为触发器将在所有{{1}上发生元素，或者没有，因为它可能需要更具体的触发器。如果我这样做：

.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然后尝试循环它的孩子，我仍然什么也得不到。我觉得我遗漏了一些关于自定义事件处理的非常简陋的事情。

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（）函数不会在任何内容上运行。

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

1 个答案: