绑定点击到li'的孩子

Bind click to li's child

本文关键字：孩子 li 绑定      更新时间：2023-09-26

我有这个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>

当我点击Add行时，我会用我需要的元素附加一个新的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元素，但我无法使其工作。

此代码应该可以工作：

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

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

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

将点击事件处理程序添加到主体中，任何点击事件都会在DOM中弹出，直到它被处理为止。在这里，我们正在寻找body级别的单击，但使用类delrow的原始元素。由于主体始终存在，它将自动处理.delrow的所有新元素的点击。

您可以为此使用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

向

  • 元素添加一个类。然后你可以使用$（".liclass"）.on（"click"，function（）{dosomething}）；无论添加多少
  • 元素，都可以拥有相同的处理程序。

    • 只需在附加后立即绑定：

    $(".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() {});
});
    相关文章：