将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);