纯Js onclick元素不起作用

Question

我遇到了麻烦，当我运行下这个代码在greasemonkey最后的位置工作和运行的功能。

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点击，但你需要检查事件：

​​

办法是内联，因为你产生在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>'; 
} 

你可以th Ë修改删除（对于功能较差的名字，因为删除是一个内置的方法）来处理传入的段落

例子：

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