停止使用jQuery代表/实时功能不起作用

Question

Heres问题HTML：

<ul id="update-list">
<li class="update" onclick="window.location('some_url')">
  <h2> some header </h2>
  <p> some paragraph </p>
  <div>
    <a class="popup-link">
      <span> Show Popup </span>
      <span> + </span>
    </a>
  </div>
</li> 
// this repeats n times
//...
</ul>

当我单击 .popup-link 链接，它应该仅打开Lightbox弹出式弹出窗口（效果） li 也开火。问题是 li 标签都是部分部分的一部分，这些部分是通过Ajax在不同页面上获取的。所以我使用jQuery的 delegate 绑定事件如下：

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    //console.log(e.isPropagationStopped());  this shows 'true' in console
    $.popup();   // launch popup
    e.preventDefault(); // or return false
});

无论如何，这似乎不起作用，并且在线开火。我尝试过 live() 也没有成功。我这里有什么东西吗？

Answer 1

afaik你不能可靠地阻止 内联活动处理程序 通过停止在 随附的活动处理程序.

此外，使用 live() 或者 .delegate() 您不能使用 preventDefault() 也不 stopPropagation(). 。你需要返回 错误的 为了防止气泡阶段和默认行为。

无论如何，正如我已经提到的那样，您无法阻止内联事件处理程序对此开火。

因此，要么完全创建 unobtrusive （这是我强烈建议）或删除 内联点击处理程序 在代码中。

例子：

$('#update-list').delegate('.popup-link', 'click', function(e){       
   $.popup();   // launch popup
   return false;
}).delegate('.update', 'click', function(){
   window.location('some_url');
})
// the rest of this is unnecessary if you can just omit the onclick attribute 
.find('.update')
  .removeAttr('onclick'); 

参考： 。代表（）

Answer 2

你能尝试一下吗？

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    e.preventDefault(); // or return false

     // open popup in a timeout so that this function can return false
    window.setTimeout(function() {$.popup();}, 20);

    // for IE
    e.cancelBubble = true;
    return false;
});

Answer 3

 $('#update-list').delegate('.popup-link', 'click', function(e){       
  e.stopImmediatePropagation();
  e.preventDefault();
  // do something...
});

Answer 4

你可以尝试 .delegate() 已被 .on() 方法。

它会正常工作