Question

我正在尝试用纯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

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

Answer 2

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）的众多活动之一！

如果您需要动态复选框来执行“打开”功能，请点击！

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

2 个答案: