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