javascript - 分页加载按钮的 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，但我觉得这是非常不必要的，只需几行单独的JavaScript，而不是无缘无故地添加额外的 HTML。

因此，感谢所有帮助，

谢谢。 :)

fiddle : https://jsfiddle.net/xhp4cesr/

编辑:我注意到删除按钮内的span后，它会起作用，但一旦添加回来，它就不起作用了。

Answer 1

实现此目的的一种方法是删除 e.stopPropogation 并定位子级

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>