在動態複選框上添加onclick事件

我試圖在純Javascript中創建一個'CRUD'，它幾乎完成了，唯一需要的是準備值爲<li>的輸入，要做到這一點，我會喜歡在功能insert()中動態創建的複選框中添加onclick事件，但每次單擊複選框時都不會發生任何事情。在動態複選框上添加onclick事件

<!DOCTYPE html> 
<html> 
<head> 
<script> 
    window.onload = function(){ 
     btnInsert = document.getElementById("btnInsert"); 
     btnEdit = document.getElementById("btnEdit"); 
     btnDelete = document.getElementById("btnDelete"); 
     vname = document.getElementById("tbName"); 
     ul = document.getElementsByTagName("ul")[0]; 

     btnInsert.onclick = insert; 
     btnDelete.onclick = remove; 
    } 

    function insert(){ 
     li = document.createElement("li"); 
     li.innerHTML = vname.value; 
     li.innerHTML += " <input type='checkbox' onclick='select()'   value='Select' /> Update"; 
     ul.appendChild(li); 
     vname.value = ""; 
    } 

    function select(){ 
     alert("Checked"); 
    } 

    function remove(){    
     var lis = document.getElementsByTagName("li"); 
     for(i = 0; i<lis.length; i++){ 
      lis[i].onclick = function(){ 
      this.remove(); 
     } 
    } 
} 
</script> 
</head> 
<body> 
<label for="tbName">Name: </label> 
<input name="tbName" id="tbName"/><br /><br /> 
<button id="btnInsert">Insert</button> 
<button id="btnEdit">Edit</button> 
<button id="btnDelete">Delete</button> 
<br /><br /> 
<ul> 
</ul> 
</body> 
</html>

來源

2016-07-29 NTM

[在動態創建的元素上添加事件偵聽器的可能的副本]（http://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically） –

在您的插入函數中添加事件監聽器'li'就像這樣：'li.addEventListener（'click'，callback）;'其中'callback'是你想綁定到事件的函數。編輯：第二次看，你添加輸入INTO列表項，在這種情況下，你只需要使用「而不是」，它應該工作。另外我認爲你的腳本在末尾有一個額外的？ – Dellirium

1）'' addEventListener'可能是你想要的。2）儘量避免有很多全局變量。 – gcampbell

看來名select引起衝突，因爲我能得到你的代碼有以下變化工作：

HTML

li.innerHTML += " <input type='checkbox' onclick='sel()' value='Select' />Update";

的Javascript

function sel(){ 
    alert("Checked"); 
}

進一步的試驗表明，如果我們記錄功能的內容有：

li.innerHTML += " <input type='checkbox' onclick='console.log(select.toString)' value='Select' />Update";

控制檯顯示以下

function select() { [native code] }

所以我的猜測是，select是函數已經被定義的名稱瀏覽器，爲什麼你不能用它作爲你的函數的名字。

總之，您的代碼會觸發另一個select函數，而不是您在源代碼中定義的函數。

來源

2016-07-29 16:26:14

就是這樣，在這裏完美的工作，我很欣賞它。 – NTM

在動態複選框上添加onclick事件

回答

相關問題