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（）函數將不會在任何對象上運行。