純Js onclick元素不起作用

Question

當我在潤滑脂猴子的最后一個位置運行和運行功能下運行此代碼時遇到麻煩。

var arry = [];
arry = GM_listValues();
for ( var i = 0; i < arry.length; i++) {  
    document.getElementById('moje_menu').innerHTML = document.getElementById('moje_menu').innerHTML + '<p id="' + arry[i] + '">' + arry[i] + '</p>';
    document.getElementById(arry[i]).onclick = delete;
}

在10位上，最后一個工作...為什么？

Answer 1

替換innerHTML時，將刪除所有以前的事件處理程序。

在普通JS中，您可以檢測到div中的點擊，但是您需要檢查事件 ：

 function removeP(p) { console.log(p.id); } var arry = ["a","b","c"]; window.onload=function() { for ( var i = 0; i < arry.length; i++) { document.getElementById('moje_menu').innerHTML += '<p id="' + arry[i] + '">' + arry[i] + '</p>'; } document.getElementById('moje_menu').onclick=function(e) { var event = e?e:window.event,tgt = event.target || event.srcElement; if (tgt.tagName.toLowerCase()=="p") { console.log(tgt.id); } } } 

 <div id="moje_menu"></div> 

替代方法是內聯的，因為無論如何都會生成P

var arry = [];
arry = GM_listValues();
for ( var i = 0; i < arry.length; i++) {  
    document.getElementById('moje_menu').innerHTML += '<p id="' + arry[i] + '" onclick="delete(this)">' + arry[i] + '</p>';
}

您可以修改delete（由於delete是內置方法，所以函數名稱較差）來處理所傳遞的段落

例：

 function removeP(p) { console.log(p.id); } var arry = ["a","b","c"]; for ( var i = 0; i < arry.length; i++) { document.getElementById('moje_menu').innerHTML += '<p id="' + arry[i] + '" onclick="removeP(this)">' + arry[i] + '</p>'; } 

 <div id="moje_menu"></div> 

在jQuery中，您可以輕松地委派：

 function removeP() { console.log(this.id); } $(function() { var arry = ["a","b","c"]; var $menu = $('#moje_menu'); for (var i=0; i<arry.length; i++) { $menu.append($('<p/>',{"id":arry[i], "text":arry[i]})) } $menu.on("click","p",removeP); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="moje_menu"></div> 

Answer 2

這是我的解決方案，我不喜歡它們，但可以工作。

var arry = [];
arry = GM_listValues();

for ( var i = 0; i<arry.length; i++) { 

 // if(arry[i].search('player')==''){
    document.getElementById('moje_menu').innerHTML += '<p class="lista_farm" id="'+arry[i]+'">'+arry[i]+'</p>';
    //document.getElementById(arry[i]).onclick = usun_farme;
//}
}
var lista_farm = document.getElementsByClassName('lista_farm');

for(var i = 0; i<lista_farm.length; i++){
  lista_farm[i].onclick = usun_farme;
}