Question

我有HTML

<ul class="list-row">
    <li>
        <input name="field1" class="field1" type="text" placeholder="field 1">
        <input name="field2" class="field2" type="text" placeholder="field 2">
        <p class="delrow">Delete row</p> 
    </li>
    <li>
        <input name="field1" class="field1" type="text" placeholder="field 1">
        <input name="field2" class="field2" type="text" placeholder="field 2">
        <p class="delrow">Delete row</p> 
    </li>
    <p class="addrow">Add row</p> 
</ul>

当我点击添加行时，我添加了一个带有我需要的元素的新li。 jQuery上的函数就是这个：

$(".addrow").on("click",function() {
    $(this).before("<li>\n\
        <input name='field1' class='field1' type='text' placeholder='field 1' />\n\
        <input name='field2' class='field2' type='text' placeholder='field 2' />\n\
        <p class='delrow'>Delete row</p></li>");

});

我需要的是将click事件附加到附加到DOM的新delrow。我尝试选择获得兄弟姐妹并找到p元素，但我无法使其发挥作用。

Answer 1

此代码应该有效：

$('.list-row').on('click','.delrow',function(){/*do stuff*/});

它将向列表行添加一个事件处理程序，因此它将适用于附加的行项

Answer 2

您可以使用insertBefore方法：

$(".addrow").on("click",function() {
    var newElement = $("<li>\n\
        <input name='field1' class='field1' type='text' placeholder='field 1' />\n\
        <input name='field2' class='field2' type='text' placeholder='field 2' />\n\
        <p class='delrow'>Delete row</p></li>").insertBefore( this );

    newElement.find( '.delrow' ).click( function() {
        //your code
    });

});

在这种情况下，newElement变量将指向动态创建的HTML

Answer 3

$("body").on('click', '.delrow', function () {
   ...
});

将click事件处理程序添加到正文中，任何单击事件都会冒泡DOM，直到处理完为止。在这里，我们正在寻找body级别的点击，但是有一个类delrow的原始元素。由于正文始终存在，它会自动处理.delrow所有新元素的点击次数。

Answer 4

在

元素中添加一个类。然后你可以使用$（＆＃34; .liclass＆＃34;）。on（＆＃34; click＆＃34;，function（）{do something}）;无论您添加多少

元素，您都可以拥有相同的处理程序。

Answer 5

在你追加后立即绑定它：

$(".addrow").on("click",function() {
    $(this).before("<li>\n\
        <input name='field1' class='field1' type='text' placeholder='field 1' />\n\
        <input name='field2' class='field2' type='text' placeholder='field 2' />\n\
        <p class='delrow'>Delete row</p></li>");
    });

    $(this).prev("li").find(".delrow").click(function() {});
});

点击给李的孩子点击

5 个答案: