使用jQuery添加列表项后删除它们

21 浏览
0 Comments

使用jQuery添加列表项后删除它们

在使用jQuery添加列表项之后，我遇到了一些在点击后删除列表项的问题。如果我要猜测为什么会发生这种情况，可能是因为jQuery可能在查看我原始的HTML文档而不是添加列表项后的更新文档？无论如何，我无法找出解决方法。

这是我的HTML代码：

这是我的jQuery代码：

$(document).ready(function() {
    $('#add').click(function() {
        var item = $('#todo')
        $('ul').prepend("
  • "+item.val()+"
    • ");
    });
        $('li').click(function() {
        $(this).remove();
    });
});

    0

    1 答案

    0 Comments

    问题的出现原因是：在代码中添加了一个用于删除选定项的按钮，但是点击按钮后，并没有触发删除操作。

    解决方法是：在动态添加的元素上使用事件委托。通过将事件绑定到父元素上，并指定子元素的选择器，可以确保即使在元素动态添加之后，也能够正确地处理事件。

    具体的解决代码如下：

    $(document).ready(function() {
    $('#add').click(function() {
        var item = $('#todo')
        $('ul').prepend("
  • "+item.val()+"
    • ");
    });
    $('ul').on('click', 'li', function() {
        $(this).remove();
    });
});

    通过上述代码，可以实现点击删除按钮后，正确地删除选定项。

    参考链接：[Fiddle](http://jsfiddle.net/arunpjohny/WgBAc/)

    在这个链接中，我添加了一个用于删除选定项的按钮，但是点击按钮后，并没有触发删除操作。

    问题的解决方法是使用事件委托。通过将事件绑定到父元素上，并指定子元素的选择器，可以确保即使在元素动态添加之后，也能够正确地处理事件。

    具体的解决代码如下：

    $(document).ready(function() {
    $('#add').click(function() {
        var item = $('#todo')
        $('ul').prepend("
  • "+item.val()+"
    • ");
    });
    $('ul').on('click', 'li', function() {
        $(this).remove();
    });
});

    通过上述代码，可以实现点击删除按钮后，正确地删除选定项。

    参考链接：[jsfiddle.net/17ufszLq/1](https://jsfiddle.net/17ufszLq/1)

    0