Question

我有奇怪的问题。起初我不想使用.on（）方法，因为我根本无法使用它，所以我使用了.live（）。

现在，我正在编写一个新的jQuery脚本，我大量使用.on（）并且它可以工作。到现在为止。

jQuery代码：

   $('#artistList a').on('click',function(e){
    console.log($(this).parent().text());
    e.preventDefault();
   });

HTML代码：

<div id="artistList">
 <div class="artist"><a class="delete" href="#"></a>Psy</div>
 <div class="artist"><a class="delete" href="#"></a>Fernanda Martins</div>
 <div class="artist"><a class="delete" href="#"></a>DJ Nreal</div>
</div>

也试过这个方法：

   $('#artistList>a').on('click',function(e){
   $('.delete').on('click',function(e){

没有运气。我错过了什么？

这是唯一不起作用的部分

我已经阅读了有关.on（）的文档，并且基于此，这应该可行。另外，我正在使用最新的jQuery（jquery-1.8.3.min.js）。

修改

<a>元素在CSS中有width: 15px和height: 15px，因此它们可见。

Answer 1

您的链接（<a>元素）在此处为空，因此它们显然无法捕获click事件。我想您忘记将Psy，Fernanda Martins等移到 <a href="..."></a>内。

此外，只有第二个选择器才会实际收集这些链接（因为它们上面都有类delete）。第一个 - '#artistList>a' - 尝试找到具有artistList id的元素 direct 后代的锚点。但它注定要在这个崇高的任务中失败，因为还有另一层将它们分开 - <div class="artist">。因此规则应该类似于'#artistList a'。

Answer 2

为了像live那样工作，你需要将处理程序委托给更高级别的元素。

 $('body').on('click','#artistlist a', function(e) {
     // note the change to the selector to reflect your actual mark up
     // handler body
 });

如果在最初加载页面后动态添加处理程序应应用的元素，则需要使用此on形式。还要注意，应该在加载DOM之后应用处理程序，方法是在body元素结束之前放置脚本或使用ready事件处理程序$(function() { ... });

如果处理程序有时有效，有时则不会在加载到DOM的元素和正在调用的脚本之间的页面加载上出现竞争条件。这通常表示您已省略在ready事件处理程序中添加处理程序。

jQuery .on（）有时可以工作，有时不工作

2 个答案: