javascript - 检查稍后将创建的对象的单击

Question

好的，如果我有这样的 jQuery：

$(document).ready(function(){
    $('#btn1').click(function(){
        //Add stuff to table
        $('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /></td>/tr>');
    });
    //Created button above is triggered
    $('#btn2').click(function(){
        alert('btn 2 was clicked');
    });
});

当我点击“btn2”时什么都不会发生。我想那是因为 $(document).ready() 时它不存在？如果我将 btn2 的 js 发送到表格行中，它工作正常。像这样的东西：

$(document).ready(function(){
$('#btn1').click(function(){
    //Add stuff to table
    $('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /><script type="text/javascript ..... BLAH $(\'#btn\').click BLAH </script>;
    });
});

想法？

Answer 1

使用on让表将事件委托给稍后可能出现的元素：

$('#items_table').on('click', '#btn2', function(){
    alert('btn 2 was clicked');
});

Answer 2

使用.on()将事件处理程序附加到父元素，并将选择器作为参数传递。这也适用于动态添加的元素......

 $('#items_table').on('click', '#btn2', function(){
    alert('btn 2 was clicked');
 });