jquery中'a'标签的点击事件答案

【问题标题】：Click event of 'a' tag in jqueryjquery中'a'标签的点击事件
【发布时间】：2013-01-25 06:52:26
【问题描述】：

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

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

    });

【问题讨论】：

回答你的问题

标签： javascript jquery html web-applications

【解决方案1】：

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

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

preventDefault 方法用于阻止链接加载新页面，以防在 href 属性中有目标内容。如果您保持与示例中相同的 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，您可以限制调用函数的次数来提高性能。

【讨论】：

【解决方案2】：

先做一些事情：如果您使用的是 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
});

【讨论】：

【解决方案3】：

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

你也可以通过委托事件。这里是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() 已被贬低..

【讨论】：

【解决方案4】：

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

【讨论】：