将 Jquery 点击处理程序添加到动态加载的内容答案

【问题标题】：Adding Jquery click handler to dynamically-loaded content将 Jquery 点击处理程序添加到动态加载的内容
【发布时间】：2017-01-18 06:50:03
【问题描述】：

我的 Rails 应用会动态加载指向页面的链接。我想在这些链接上附加一个onClick 操作。

链接已正确附加到页面，但页面的 JS 未应用于那些新添加的元素。

我尝试将新的 JS 标记呈现给动态添加的内容。我还尝试包含此代码块，它应该针对添加到 #links div 的 .select-link 的任何链接。

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

该代码在链接未动态加载时有效。但是，在动态加载时，我似乎无法对它们应用任何 onClick 处理程序，即使在控制台中也是如此。

什么可能导致这个问题？

有关更多上下文，我要解决的问题在这里：AJAX-loaded JS not rendering

【问题讨论】：

请在加载 Rails 内容后原样包含 HTML。
请不要故意提出重复的问题。您在 3 小时前提出的链接 AJAX-loaded JS not rendering 的问题实际上是该问题的重复。
您的问题没有得到有效帮助的原因是您没有在问题中提供足够重复问题的完整 minimal reproducible example。像您这样的调试问题需要 [mvce] 的原因是，如果没有 minimal reproducible example，我们必须猜测问题是什么。请edit 您的问题包括一个minimal reproducible example 可用于复制问题。即使您必须显示 AJAX 代码并提供 AJAX 响应的文本，也要这样做。
@Makyen 很好的反馈。在这个问题中，我想知道一般来说，什么会导致新添加的 DOM 元素无法被 Jquery 选择器定位。有什么想法吗？
至少有几个可能的原因。但是，由于您没有提供minimal reproducible example，因此我们所说的任何内容都只是基于太少信息的猜测。专门针对主题问题的要求是为了防止您在没有足够信息的情况下让他们推测而浪费大量其他人的时间。您所拥有的是一个特定的调试问题。你有代码，它不工作。此类问题需要 minimal reproducible example 才能成为主题。如果不提供，您是在故意花费其他人的时间来猜测您的问题可能是什么。

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

您应该像这样将您的事件绑定到文档

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

【讨论】：

不幸的是，这不起作用。（它在静态渲染时有效，但不是动态渲染）。

【解决方案2】：

试试下面的代码：

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

或

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

【讨论】：

为什么要使用.live
我都试过了。不幸的是，它们不起作用。（两者都在静态渲染时工作，但不是动态渲染）。

【解决方案3】：

问题是，您在问题中的代码确实适用于动态插入的内容。

下面的 sn-p 有一个 <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/>

如果没有更多信息，花大量时间推测可能导致问题的原因只是在浪费时间。

正在发生的事情的一种可能性是，正在为这些事件触发另一个事件处理程序并停止传播。一种（主要）检查的方法是在捕获阶段（即不使用 jQuery）向window 添加一个事件处理程序。你可以这样做：

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

【讨论】：