在动态复选框上添加onclick事件

Adding onclick event on dynamic checkbox

本文关键字：onclick 事件 添加 动态 复选框      更新时间：2023-09-26

我正在尝试用纯Javascript制作一个'CRUD'，它几乎已经完成了，我只需要准备具有值<li>的输入，为此，我想在函数insert()中动态创建的复选框中添加一个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>

名称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函数，而不是您在源代码中定义的函数。

OP不希望它在LI上启动，他希望它在checkbox上启动！

为动态复选框指定一个ID值，如chkBox1。现在，在您将其附加到文档后，您可以使用调用它

var thechkBox=document.getElementById("chkBox1");

现在你可以用点击thechkBox

thechkBox.addEventListener("click", itfired); //itfired is the script that captures the click event.

这是您可以访问的众多活动之一(https://www.w3schools.com/js/js_htmldom_events.asp)！

如果您需要动态复选框来执行"on"功能，请单击！

相关文章：