gpt4 book ai didi

jquery - 如何从可排序列表中删除动态添加的项目?

转载 作者:行者123 更新时间:2023-12-01 02:21:08 25 4
gpt4 key购买 nike

我创建了一个 jquery 可排序列表,其中每个项目的右侧都有一个“删除”按钮。当您单击删除按钮时,该项目将被删除。我从这里的另一个问题(Delete Jquery-ui sortable list item)中找到了这一点。我需要允许用户将项目添加到列表中,因此我创建了一个“添加”按钮。添加工作正常,但是,无法使用删除按钮删除新添加的项目。这是jfiddle:http://jsfiddle.net/g33ky/fadAn/1/

代码如下:

<script>
$("#fruitList").sortable();

$("#fruitList .delete").click(function () {
$(this).parent().remove();
});

$("#addFruit").click(function () {
$('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});
</script>

<html>
<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
<li class="fruit">Apple
<button class="delete">Delete</button>
</li>
<li class="fruit">Banana
<button class="delete">Delete</button>
</li>
<li class="fruit">Orange
<button class="delete">Delete</button>
</li>
</ul>
</html>

点击“添加水果”,然后尝试删除新水果,你会发现“新水果”上的删除不起作用。我在这里用谷歌搜索并搜索过,但到目前为止还没有运气。任何帮助将不胜感激。

最佳答案

未定义动态添加元素的事件处理程序。

改用此代码

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

它将动态添加点击处理程序

关于jquery - 如何从可排序列表中删除动态添加的项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18905604/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com