ページングされたロードからのボタンのonclickがトリガーされない

Question

私はウェブサイト内に手続き型フィードを持ち、ユーザーがページの一番下までスクロールするたびにデータを読み込みます。いつものもの。

ページネーション自体は正常に動作します。ただし、JavaScriptを使用するボタンのクリックは機能しません。まったく。

これが動作していないボタンののJavaScriptトリガーです：

var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), // the buttons 
    modal; 

document.onclick = function(e){ // document on click 
    for(var i = 0; i < modalTrigger.length; i++){ // iterate through each button 
     if(e.target == modalTrigger[i]){ // if target clicked was button 
      e.stopPropagation(); // stop dom event from bubbling 
      modal = document.getElementById(modalTrigger[i].getAttribute("data-activemodal")); 

      document.body.style.overflow = "hidden"; // disable scroll on page 
      modal.style.display = "block"; // display modal 
     } 
    } 
} 

限り、私は承知しているとして、このは（stopPropagation()を使用して）作業していて、ああする必要があります、そうではありません。

は私がインラインJSを使用するをつもりだったが、私はそれが非常に不必要だと代わりのためのミックスに余分なHTMLを追加するのではなく別ののJavaScriptの行だけのカップルを行うことができるように感じます理由はありません。

だから、任意の、およびすべてのヘルプは高く評価され、

感謝。 :)

フィドル：https://jsfiddle.net/xhp4cesr/

EDIT：は私がボタン内spanを削除した後、それがうまくいくことに気づいたが、それが戻って追加されましたとすぐに、それはないだろう。あなたがこれを行うことができます

Answer 1

一つの方法は、e.stopPropogationを削除しても、あなたはこの `document.querySelectorAll（ " TS-modal__trigger"）を呼び出した場合、子供

var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), // the buttons 
 
    modal; 
 

 
document.onclick = function(e) { // document on click 
 
    for (var i = 0; i < modalTrigger.length; i++) { // iterate through each button 
 
    if (e.target == modalTrigger[i] || modalTrigger[i].children) { /* <- added children as target */ 
 
     modal = modalTrigger[i].getAttribute("data-activemodal"); 
 
     console.log(modal); 
 
    } 
 
    } 
 
}

a { 
 
    background: red; 
 
    padding: 40px; 
 
} 
 

 
span { 
 
    color: yellow; 
 
}

<a class="ts-modal__trigger" data-activemodal="ts-main-feed_status-comments-overlay"> 
 
    <span>11</span> 
 
</a>