使用jQuery将click事件添加到动态添加的元素中

Question

我有以下HTML：

<td id="tppBox">
     <div>                                
       <input name="tpp[]" type="text" style="width:90%"/>
       <a id="addtpp" class="small-button btn">+</a>
     </div>
</td>

和JavaScript代码：

$(document).ready(function(){
    $('#addtpp').click(function(){

        var box = $("#tppBox");  
        box.append("<div><input name='tpp[]' type='text' style='width:90%'></input> \n\
             <a class='small-button btn removetpp'>-</a></div>");
    });

    $(".removetpp").on('click',function(){
        $(this).parent().remove();
    }); 
});

虽然添加了带 - 的输入字段，但是当我按 - 删除时没有任何反应！我究竟做错了什么？

提前致谢！

Answer 1

当您尝试附加事件监听器时，

.removetpp在DOM中不存在：您需要委派您的事件。

假设#tppBox是静态容器：

$("#tppBox").on('click', '.removetpp', function(){
    $(this).parent().remove();
});