JQuery - 通過自定義事件上的動態元素循環

Question

我在這裏點擊了一個磚牆。我當前項目的前一位開發人員決定使用一個巨型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，然後通過它的孩子嘗試循環，我還是什麼也沒得到。我覺得我缺少一些關於自定義事件處理的基礎知識。

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