javascript - jquery中 'a'标签的点击事件

Question

我需要触发“deletable”类中“a”标签的点击事件。我在 SO 中看到了一些类似的问题，但以下代码对我不起作用。我想做的是删除相关的 <li>来自<ul> .

    $(document).ready(function () {
      $('.deletable').live("click", function () {
        alert("test"); // Debug
        // Code to remove this <li> from <ul>
     });
   });

<form ...>   
    <ul>
        <li>One<a href="#" class="deletable">Delete</a></li>
        <li>Two<a href="#" class="deletable">Delete</a></li>
        <li>Three<a href="#" class="deletable">Delete</a></li>
    </ul>
</form>

我假设我在 $('...') 中使用了不正确的对象层次结构标签。但我没有足够的 js/jquery/DOM 知识来解决这个问题。请帮忙。

编辑

感谢您的回答，但它们都不适合我。实际上我正在添加<li>动态地。也许有问题。请检查，

#sps - 一个列表框 #add - 一个按钮 #splist - 另一个列表框 #remove - 一个按钮

$(document).ready(function() {
        $('#add').click(function(e) {
            var selectedOpts = $('#sps option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $('#splist').append($(selectedOpts).clone());
            $('ul').append('<li>' + selectedOpts.text() + '<a href="#" class="deletable" id="id' + selectedOpts.val() + '">Remove</a>' + '</li>');
            e.preventDefault();
        });

        $('#remove').click(function(e) {
            var selectedOpts = $('#splist option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $(selectedOpts).remove();
            e.preventDefault();
        });

    });

Answer 1

jQuery 的 .live() 方法已被弃用。您可以使用 $('body') 获得类似的功能并委托(delegate)给 .deletable，就像我在以下代码中所做的那样:

$('body').on('click', '.deletable', function(e){
  e.preventDefault();
  // this is the li that was clicked
  $(this).parent().remove();
});

如果 href 属性中存在目标内容，preventDefault 方法用于阻止链接加载新页面。如果您保持与示例中相同的 HTML 结构，那么您可以简单地获取 anchor 元素 (this) 并获取父元素，然后将其从 DOM 中删除。

明智的做法是不使用 $('body')，而是将 .deletable anchor 定位到容器，在本例中，该 anchor 为 $('ul ')。该函数如下所示:

$('ul').on('click', '.deletable', function(e){
  e.preventDefault();
  // this is the li that was clicked
  $(this).parent().remove();
});

使用 $('body') 意味着必须过滤页面上的每个事件，以查看它是否源自 .deletable anchor 。通过将其范围限定为 li 之前的 ul，您可以限制调用函数的次数，从而提高性能。