Question

我不明白为什么我的代码不能按预期工作。我想创建一个动态表，其中用户可以添加/删除行。它确实适用于Jquery Click（）函数，但问题是我想要的Add函数不适用于DOM中新添加的元素。

<table>
    <tr>
        <th>Hello</th>
        <th>world</th>
    </tr>
    <tr>
        <td >Hello</td>
        <td>world</td>
        <td class="add">add</td>
        <td class="remove">remove</td>
    </tr>

</table>
<script>
    $(".add").on('click','.add',function(e){    
        var parent = $(this).parent();      
        element = '<tr>';
        element += '<td>Hello</td>';
        element += '<td>world</td>';
        element += '<td class="add">add</td>';
        element += '<td class="remove">remove</td>';
        element += '</tr>';
        $(parent).after(element);
    }); 
</script>

Answer 1

尝试改变：

$(".add").on('click','.add',function(e){

为：

$(document).on('click','.add',function(e){

Answer 2

将$(".add")更改为$("table")，

<script>
    $("table").on('click','.add',function(e){    
        var parent = $(this).parent();      
        element = '<tr>';
        element += '<td>Hello</td>';
        element += '<td>world</td>';
        element += '<td class="add">add</td>';
        element += '<td class="remove">remove</td>';
        element += '</tr>';
        $(parent).after(element);
    }); 
</script>

要为动态创建的元素处理click事件，您需要使用event delegation方法

Answer 3

问题：

你的代码在大声朗读时说出来了：

查找具有该类添加的所有元素。
添加点击事件监听器。
聆听点击.add的子元素，该元素的类为.add。

如果您编写了一个应用事件的常规选择器，那么它将是

$(".add .add").click(function(){});

您需要做什么：

选择器必须是父元素。尽可能接近click事件发生的位置是一个很好的经验法则。在你的情况下，tbody看起来像是一个很好的地方，以便点击。

$("table tbody").on('click','.add', function (e) {

你也不必在$（）中包装parent，因为它已经是一个jQuery对象

$(parent).after(element);

应该是

parent.after(element);

最终代码

$("table tbody").on('click','.add', function (e) {    
    e.preventDefault();
    var trow = $(this).closest("tr");      
    element = '<tr>';
    element += '<td>Hello</td>';
    element += '<td>world</td>';
    element += '<td class="add">add</td>';
    element += '<td class="remove">remove</td>';
    element += '</tr>';
    trow.after(element);
});

Jquery On Click事件处理程序未按预期工作

3 个答案: