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让表将事件委托(delegate)给稍后可能出现的元素:

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