javascript - Adding onclick event on dynamic checkbox

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.

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

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

Share Improve this question edited Jul 30, 2016 at 20:48 Gerardo Cauich 6326 silver badges21 bronze badges asked Jul 29, 2016 at 14:58 NTM 471 gold badge1 silver badge3 bronze badges

1 Possible duplicate of add event listener on elements created dynamically – Mehdi Dehghani Commented Jul 29, 2016 at 15:02
In your insert function add the event listener to the li like this: li.addEventListener('click', callback);' where callback` is the function you want to bind to the event. EDIT: on second look, you are adding the input INTO a list item, in that case you just need to use " instead of ' and it should work. Also i think your script has an extra } at the end? – Dellirium Commented Jul 29, 2016 at 15:07
1) addEventListener is probably what you want. 2) Try to avoid having lots of global variables. – gcampbell Commented Jul 29, 2016 at 15:08

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

It seems the name select is causing conflict since I could get your code working with the following changes:

HTML

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

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.

In short, your code triggers another select function, not the one you defined in your source code.

The OP doesn't want it to fire on the LI, he wants it to fire on the checkbox!

Give your dynamic checkbox an ID value like 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.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./js/js_htmldom_events.asp)!

If you needed the dynamic checkbox to perform a function "on"click!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Adding onclick event on dynamic checkbox - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)