將Jquery單擊處理程序添加到動態加載的內容中

Question

我的Rails應用程序動態加載頁面鏈接。 我想在這些鏈接上添加onClick操作。

鏈接正確附加到頁面，但頁面的JS未應用於這些新添加的元素。

我已經嘗試將新的JS標簽渲染到動態添加的內容中。 我也試過包含這個代碼塊，它應該針對任何帶有.select-link添加到#links div .select-link 。

        $("#links").on("click", ".select-link", function() {
          my code here...
        })

當鏈接未動態加載時，該代碼有效。 但是，即使在控制台中，我也似乎無法在動態加載時對它們應用任何onClick處理程序。

什么可能導致這個問題？

對於更多上下文，我試圖解決的問題是： AJAX加載的JS無法渲染

Answer 1

您應該將事件綁定到這樣的文檔

$(document).on("click", "#links .select-link", function() {
          my code here...
});

Answer 2

請嘗試以下代碼：

$(document).on("click", "#links .select-link", function() {
          /*my code here...*/
})

要么

$("#links .select-link").live("click", function() {
         /*my code here...*/
})

Answer 3

問題是，您在問題中的代碼適用於動態插入的內容。

以下代碼段有一個<div class="select-link"> ，它是HTML的一部分，並通過JavaScript插入兩個<div class="select-link">元素。

jQuery用於添加兩個單獨的click處理程序。 在將任何動態內容添加到DOM之前添加第一個處理程序。 在添加第二個<div class="select-link">之后但在插入第三個之前添加第二個處理程序。 兩個處理程序都被調用所有三個<div class="select-link"> 。 這表明您在問題中提供的代碼適用於動態插入的內容。 這意味着其他事情正在發生。

 $("#links").on("click", ".select-link" ,logEvent.bind(null,'#links on .select-link','jQuery')); function logEvent(text,type,e){ var curTarget = (e.currentTarget.id)?e.currentTarget.id:e.currentTarget.nodeName; var target = (e.target.id)?e.target.id:e.target.nodeName; console.log(text + ' ::' + type + ' ::curTarget=' + curTarget + ' ::target=' + target); } function appendLink(id,text) { document.querySelector('#links').insertAdjacentHTML('beforeend' ,'<div class="select-link" id="' + id + '" style="color:blue;">' + text + '</div>'); } appendLink('sel-pre-ready','Selected Link 2 (added prior to document ready)'); $(document).ready(function(){ $("#links").on("click", ".select-link" ,logEvent.bind(null,'#links on .select-link','jQuery at doc ready')); appendLink('sel-post-ready','Selected Link 3 (added after document ready)'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Not Link</div> <div id="links">Links <div id="not-sel">Not Selected Link</div> <div class="select-link" id="sel-html" style="color:blue;">Selected Link 1 (HTML)</div> </div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

沒有更多信息，花費大量時間來推測可能導致問題的原因只是浪費時間。

發生的一種可能性是為這些事件觸發另一個事件處理程序並停止傳播。 （大多數）檢查的一種方法是在捕獲階段向window添加事件處理程序（即不使用jQuery）。 您可以使用以下內容執行此操作：

//The following will catch the event prior to almost all possible
//  interference by other event handlers.
window.addEventListener('click',function(e){
    if(!$(e.target).is("#links .select-link")){
        return; //Not one of the elements we are interested in
    }//else
    //e.stopPropagation();
    logEvent('on window','Capture',e);
},true);