Javascript 单击时的Jquery事件处理程序未按预期工作

我不明白为什么我下面的代码不能按预期工作。我想创建一个动态表，用户可以在其中添加/删除行。它对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>

你好
世界
你好
世界
添加
去除
$（“.add”）。在（'click'，.add'，函数（e）{
var parent=$（this.parent（）；
元素=“”；
元素+=‘你好’；
元素+=‘世界’；
元素+=‘添加’；
元素+=‘删除’；
元素+=''；
$（父项）。在（元素）之后；
}); 

尝试更改：

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

致：

将

$（“.add”）

更改为

$（“表”）

$（“表”）。在（'click'，'add'，函数（e）{
var parent=$（this.parent（）；
元素=“”；
元素+=‘你好’；
元素+=‘世界’；
元素+=‘添加’；
元素+=‘删除’；
元素+=''；
$（父项）。在（元素）之后；
}); 

---

为了处理动态创建元素的单击事件，您需要使用方法：

问题：

当大声朗读时，您的代码会这样说：

查找包含类add的所有元素

添加单击事件侦听器

侦听对类为.add的.add子元素的单击 如果您编写了一个常规选择器来应用这些事件，那么它将是

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

---

你需要做什么：

选择器必须是父元素。尽可能接近单击事件发生的位置是一个很好的经验法则。在您的例子中，tbody看起来是一个用于单击的好地方

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

此外，您不必将父对象包装在$（）中，因为它已经是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);
}); 

$（“表tbody”）。在（'click'，'add'，函数（e）{
e、 预防默认值（）；
var trow=$（此）；
元素=“”；
元素+=‘你好’；
元素+=‘世界’；
元素+=‘添加’；
元素+=‘删除’；
元素+=''；
在（元素）之后；
}); 

为了让您了解原因，

$（“.add”）。在（'click'，'.add'）上，函数（e）{

要求将一个click事件附加到具有

.add

类的每个元素，然后在该元素的子元素上触发它，该子元素也具有

.add

类。查看这是如何工作的？

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);
});