2017-03-18 114 views
0

我有我的網站,每個用戶滾動到頁面底部時加載數據中的過程性飼料分頁負載按鈕;通常的東西。的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後,它的工作,但只要它增加了回來,它不會。你可以這樣做

+0

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

+0

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

+0

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

回答

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>

+0

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

+0

沒有必要 - 你要麼分配 –

+0

依然不工作:/ –