1

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

我已经学会了使用这个 18k+ 行的 JS 文件，但我终于遇到了一些障碍。我需要在具有 className 的其他元素数组中找到一个特定元素，.grid_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都会用新元素刷新。然后我需要遍历每个.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，然后尝试循环遍历它的子项，我仍然一无所获。我觉得我错过了一些关于自定义事件处理的非常基本的东西。

4

1 回答 1

2

这似乎适用于这个 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() 函数不会在任何东西上运行。

于 2013-06-30T02:03:37.827 回答