的onclick從不會觸發

我有我的網站，每個用戶滾動到頁面底部時加載數據中的過程性飼料分頁負載按鈕;通常的東西。的onclick從不會觸發

分頁本身工作正常;然而，利用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後，它的工作，但只要它增加了回來，它不會。你可以這樣做

來源

2017-03-18 GROVER.

如果調用此'document.querySelectorAll（「TS-modal__trigger」）'加載，那麼它將不會選擇稍後由ajax加載的元素。 – abhishekkannojia

不知道這是如何工作的，夥計。很確定它會檢查'for'循環，在'document'點擊。但是，我可能是錯誤的:)發表一個答案，如果你認爲否則 –

爲什麼你不嘗試和移動你的'modalTrigger'內的onclick函數聲明，看看是否有效。 – abhishekkannojia

一種方法是在文檔中刪除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>

來源

2017-03-18 09:04:16

糾正我，如果我錯了，但不應該是「||」。 e.target == modalTrigger [i] .children'？ :) –

沒有必要 - 你要麼分配 –

依然不工作：/ –

的onclick從不會觸發

回答

相關問題