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

Question

I'm trying to make a 'CRUD' in pure Javascript, it's almost done, the only thing that I need is preparing the inputs with the value of <li> , to do it, I'd like to add an onclick event in a checkbox that is created dynamically in the function insert() , but everytime I click the checkbox nothing happens.我正在尝试在纯 Javascript 中创建一个“CRUD”，它几乎完成了，我唯一需要的是准备具有<li>值的输入，为此，我想添加一个onclick事件在函数insert()动态创建的复选框，但每次单击复选框时都没有任何反应。

<!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>

Answer 1

It seems the name select is causing conflict since I could get your code working with the following changes:似乎名称select导致冲突，因为我可以让您的代码使用以下更改：

HTML HTML

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

Javascript Javascript

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

Further tests show that if we log the contents of the function with:进一步的测试表明，如果我们记录函数的内容：

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

the console shows the following控制台显示以下内容

function select() { [native code] }

So my guess is that select is the name of a function already defined by the browser, hence why you can't use it as a name for your functions.所以我的猜测是select是浏览器已经定义的函数的名称，因此你不能将它用作函数的名称。

In short , your code triggers another select function, not the one you defined in your source code.简而言之，您的代码会触发另一个select函数，而不是您在源代码中定义的函数。

Answer 2

The OP doesn't want it to fire on the LI , he wants it to fire on the checkbox ! OP 不希望它在LI上触发，他希望它在checkbox上触发！

Give your dynamic checkbox an ID value like chkBox1 .为您的动态复选框提供一个 ID 值，例如chkBox1 。 Now after you have appended it to the document, you can call it with:现在，将其附加到文档后，您可以使用以下命令调用它：

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

Now you can hit thechkBox with:现在您可以使用以下命令点击thechkBox ：

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

That is one of many Events you would then have access to ( https://www.w3schools.com/js/js_htmldom_events.asp )!这是您可以访问的众多活动之一（ https://www.w3schools.com/js/js_htmldom_events.asp ）！

If you needed the dynamic checkbox to perform a function "on"click!如果您需要动态复选框来执行功能，请“点击”！

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-07-29 16:26:14

解决方案2
0 2020-02-22 19:02:14

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-07-29 16:26:14

解决方案2 0 2020-02-22 19:02:14

解决方案1
2 已采纳 2016-07-29 16:26:14

解决方案2
0 2020-02-22 19:02:14