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