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

您可以使用$('a.deletable')选择器...这会找到<a>类deletable。

你也可以通过on委托事件...这里是docs

试试这个

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

如果您动态添加<li> ..

 $(document).on("click",'a.deletable',function(){ .... //even more better if u replace the document with closest elements to a.deletable ..like $(form)

live()已被删除..

Answer 2

不推荐使用jQuery的.live()方法。您可以使用$('body')获取类似的功能，并像我在以下代码中一样委托给.deletable：

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

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

最好不要使用$('body')来定位.deletable锚点的容器，在这种情况下，它将是$('ul')。该功能如下所示：

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

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

Answer 3

首先要做的事情是：如果您使用的是jQuery 1.9，则不再支持.live()功能。之前的版本，特定功能已弃用，所以你不应该真正使用它。

话虽如此，您的语法看起来是正确的。所以我假设你的处理程序函数中的层次结构不正确。

如果您尝试删除父<li>：

，则此类内容应该有效

$('.deletable').on('click', function (e) {
    // since you're working with a link, it may be doing wonky default browser stuff
    // so disable that for now
    e.preventDefault();

    // then we delete the parent li here:
    $(this).parent('li').remove();
});

如果你真的想把它变成委托签名，那么这样的东西应该有效：

$('form').on('click', '.deletable', function (e) {
    // same banana
});

Answer 4

$('a.deletable').live("click",function(){
    alert("test"); // Debug
    $(this).parent('li').remove();
});

在jquery中单击'a'标记的事件

4 个答案: