Javascript将onclick添加到动态创建的元素

Question

我正在尝试创建一个脚本来帮助对列表项进行排序，这样做我需要动态创建按钮来选择要查找的标记。我遇到的问题是每个按钮元素都使用相同的参数运行checktags()脚本，尽管在创建元素时使用了更改值。

我注意到的一件事是，当我使用Chrome开发人员工具并查看按钮时，尽管它仍然具有某些功能，但没有“onclick”属性。

    

    function checktags(tagnum){
        var res = document.getElementById("itemlist").innerHTML.split(/\n/);
        for (var i in res) {
            var list = document.getElementById(i).getElementsByTagName("input");
            var itemnum = + i + 1;
            var categorynum = + tagnum + 1;
            if(list[tagnum].checked) alert("List item " + itemnum + ", checkbox " + categorynum + " has been selected");
            else alert("List item " + itemnum + ", checkbox " + categorynum + " is UNchecked");

        }
    }


    function myFunction() {
        var res = document.getElementById("itemlist").innerHTML.split(/\n/);
        res = res.filter(function(str) {return /\S/.test(str);}); // remove empty lines
        var taglist = ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5"]


        for (var i in taglist){
            var buttonElement = document.createElement('button');
            buttonElement.onclick = function() {checktags(i);};
            var tagnum = + i + 1;
            alert("Creating button " + tagnum);
            buttonElement.innerHTML = taglist[i];
            document.body.appendChild(buttonElement);
        }


        for (var c in res) {
            var newElement = document.createElement('div');
            newElement.id = c; 
            newElement.innerHTML = + c + 1 + ") " + res[c];

            for( var j in taglist){
                newElement.innerHTML += "<input type='checkbox' value='" + taglist[j] + "'>";
            }
            document.body.appendChild(newElement);
        }

    }


</script>

<div id="itemlist" style="display:none">

    List Item 1
    List item 2

    List item 3
    List item 4
    List item 5

</div>

JS Fiddle Here