Question

My Rails应用程序动态加载指向页面的链接。我想在这些链接上添加onClick操作。

链接会正确附加到页面，但页面的JS不会应用于这些新添加的元素。

我尝试将新的JS标记呈现给动态添加的内容。我还尝试过包含此代码块，该代码块应该定位.select-link div添加#links的所有链接。

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

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

什么可能导致这个问题？

有关更多情况，我试图解决的问题是：AJAX-loaded JS not rendering

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)'); });都会调用这两个处理程序。这表明您在问题中提供的代码适用于动态插入的内容。这意味着其他事情正在发生。

＆＃13;

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

＆＃13;

window

＆＃13;

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

正在发生的一种可能性是为这些事件触发另一个事件处理程序并停止传播。（主要）检查的一种方法是在捕获阶段向//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);添加事件处理程序（即不使用jQuery）。你可以这样做：

$plan1 = preg_replace('~<TD colspan=6.*?</TR></TABLE></TD>~s", 
"<TD colspan=12 rowspan=2 align="center" nowrap="1">
<TABLE><TR><TD></TD></TR></TABLE></TD>', $plan1);

将Jquery单击处理程序添加到动态加载的内容中

3 个答案: