2

我需要触发“ 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>动态添加 s 。可能有问题。请检查，

#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();
        });

    });
4

4 回答 4

1

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

你也可以通过委托事件..这里是文档

试试这个

$('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()被贬低了。。

于 2013-01-25T06:53:57.667 回答
1

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 锚定位容器，在这种情况下，它是 .deletable 锚$('ul')。该函数如下所示：

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

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

于 2013-01-25T06:56:34.463 回答
1

先做一些事情：如果您使用的是 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
});
于 2013-01-25T06:57:22.843 回答
0 
$('a.deletable').live("click",function(){
    alert("test"); // Debug
    $(this).parent('li').remove();
});
于 2013-01-25T06:55:23.037 回答