3

我有奇怪的问题。起初我不想使用 .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: 15pxand height: 15px，所以它们是可见的。

4

2 回答 2

7

为了像您一样工作，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 中的元素和被调用的脚本之间的页面加载竞争条件。这通常表明您省略了在就绪事件处理程序中添加处理程序。

于 2012-12-24T00:31:28.097 回答
3

您的链接（<a>元素）在这里是空的，因此它们显然无法捕获click事件。我想你忘了把那些东西Psy等搬进去了Fernanda Martins。 <a href="..."></a>

此外，只有第二个选择器会实际收集这些链接（因为它们都有类delete）。第一个 - '#artistList>a'- 尝试找到作为具有id的元素的直接后代的锚点。artistList但在这个崇高的追求中注定要失败，因为他们之间还有另一层—— <div class="artist">。所以规则可能应该是这样的'#artistList a'。

于 2012-12-24T00:13:02.357 回答