Question

我有form button，可以动态添加div，其中包含paragraph和“删除”button：< / p>

<!--form-->
<form></form>

<!--dynamically add div with paragraph and remove button-->
<button onclick="addParagraph()">Add Paragraph</button>

<script>

    //remove div
    $(".remove").click(function() {
        $(this).parent.remove();
    });

    //add paragraph div
    function addParagraph(){
                $("form").append('<div><textarea></textarea><button class="remove">Remove</button></div>');
    }

</script>

不幸的是，如果我添加多个div并单击一个删除按钮，它将删除所有动态生成的div。我怎么能得到它所以只删除一个div？

我也尝试了$(this).closest("div").remove();，但结果相同。

Answer 1

对动态添加的元素执行 event delegation 。

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

下面的工作片段：

//remove div
$(document).on('click', ".remove", function(e) {
  $(this).parent().remove();
});

//add paragraph div
function addParagraph() {
  $("form").append('<div><textarea></textarea><button class="remove">Remove</button></div>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form></form>
<button onclick="addParagraph()">Add Paragraph</button>

Answer 2

对于动态创建的元素，您必须使用.live()但是，live()在1.7中已弃用，而不是on()，并已在1.9中完全删除。 live()签名：

如果你有比1.9更高版本的jQuery，你可以使用jQuery.fn.on

我建议使用下面的.on是.on函数

的签名

$(document).on( eventName, selector, function(){} );

$("body").on("click", ".remove", function(event){
    //Do Some stuff
});

解决版本：

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

jQuery：动态生成的“删除”按钮无法正常工作

2 个答案: