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 添加到混音中。

所以，感谢所有的帮助，

感谢。：）

小提琴： https://jsfiddle.net/xhp4cesr/

编辑：我注意到在删除按钮中的span后，它会起作用，但只要它被添加回来，它就不会。

Answer 1

您可以执行此操作的一种方法是删除e.stopPropogation并定位子项

＆＃13;

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

＆＃13;

a {
  background: red;
  padding: 40px;
}

span {
  color: yellow;
}

＆＃13;

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

＆＃13;

从分页加载中触发按钮不会触发

1 个答案: