javascript - 关于动态添加内容绑定点击事件的问题 -PHP中文网问答

1.程序说明:给一个无序列表动态添加节点,绑定删除事件函数并调用;
2.调用删除事件1和事件2必须同时存在才能正常删除原有节点和新增节点;
3.很明显在触发点击添加之前删除事件1是不会触发的,所以刷新后直接点击删除按钮会执行删除事件2并alert(2);
4.但是刷新后点击添加按钮:
a.删除新增的节点，触发删除事件1并alert(1);
b.删除原有的节点，(--重点来了--)先触发删除事件2并alert(2)，然后多次触发删除事件1并alert(1);
5.如果将删除事件1注掉，无法删除新增的节点元素(找过各种答案，有说是用bind绑定的，有说必须$(document).on('click','button',function(){--something--});这样写的，还有说要绑定在父元素上的，也有说用委托事件的……)，然而并没有什么用；
6.如果将删除事件2注掉，很显然在点击新增按钮之前无法触发删除事件1，只有先新增节点后才能正常执行删除事件1；

所以，请教大神两个问题：

4.b多次触发删除事件1的原因；
如何正确给动态事件绑定点击事件；

代码如下：

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"> </script>
</head>
<ul id='ul'>
    <li><button class='btns'>删除</button></li>
    <li><button class='btns'>删除</button></li>
    <li><button class='btns'>删除</button></li>
    <li><button class='btns'>删除</button></li>
    <li><button class='btns'>删除</button></li>
</ul>
<button id="addLi">添加</button>
<body>
</body>
<script>
$(function(){
    $('#addLi').click(function(){
        $('#ul').append('<li><button class="btns">删除</button></li>'); 
        dels(1); //删除事件1
    });
    //dels(2);    //删除事件2
    function dels(e){
        $('.btns').bind('click','button',function(){
            $(this).parent().remove();
            alert(e);
        });
    }
});
</script>

(function() { var del = function() { $(this).remove(); }; $("#ul li").click(del); $('#addLi').click(function() { $('#ul').append('<li><button class="btns">删除</button></li>'); $('#ul').children().last().click(del); }); })();