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

Question

我需要触发“deletable”类中“a”标签的点击事件。在我看到一些类似的问题，但下面的代码不适合我。我想要做的是从<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(); 
     }); 

    }); 

Answer 1

jQuery的.live()方法已被弃用。

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

的的preventDefault方法用于保持链路加载一个新的页面应该有一些针对性的href属性：您可以使用$('body')，并委派.deletable就像我在下面的代码没有得到类似的功能。如果您保持与示例中相同的HTML结构，那么您可以简单地获取锚元素（this）并获取父元素，然后将其从DOM中删除。

明智的做法是，不要使用$('body')，将容器定位到无效锚点，在这种情况下，该容器将为$('ul')。该功能应该是这样的：

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

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

Answer 2

可以使用$('a.deletable')选择......这一发现<a>与deletable类。

U可以经过对委托事件太..这里是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 3

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

Answer 4

有些事情第一：如果您使用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 
});