javascript - jQuery stopPropagation 与 future 的元素？

Question

我有一个包含 2 个 tr 的简单表格。

每个 tr 上的最后一个 td 即将(在将来)插入一个 button :

var futureButton=$("<input  type='button' value='click' class='btn'  />");

所以在插入之后:

$(".myTable tr td:nth-child(5)").append(futureButton)

看起来像这样:

那些按钮应该有 onClick 事件(它们没有内联 onclick)，所以我将 onclick 附加到 body 上:

$("body").on('click',".btn",function (e){
  alert('button');
 
});

这是我的问题:

每个 TR 已经有:

<tr onclick='alert("row");'> // I can't change it....it's an existing code.

所以当我按下按钮时，我得到了 2 个警报:"row" 然后是 "button"

但我想得到只有 1 个警报:“按钮”

但是我无法停止传播，因为当它到达“ body ”时为时已晚

也不是 - 我无法更改 Tr 的“onclick”

我能做什么？

JSBIN

编辑

澄清。 (抱歉，我应该强调这一点):

那些按钮(动画中的问号)是可以添加到任何 HTML 元素容器中的工具提示 - 所以在编译时 - 我不知道它会在哪里: (这就是为什么我将他们的 onclick 绑定(bind)到“正文”)

你可以看到，当我按下问号时 - 整个“tr”认为我按下它并显示数据(而且我不想要它来显示数据)。

所以我不知道Js插件会在哪里插入这个按钮/问号...

Answer 1

我会预先热修补现有的内联点击处理程序，如下所示:

$( ".myTable tr" ).each(function( _, tr ) {
  var inlineClick = tr.onclick;

  $( tr ).on('click', function( event ) {
    if( !$(event.target).hasClass( 'btn' ) ) {
      inlineClick.call( event.target );
    }
  });

  tr.onclick = null;
});

演示:http://jsbin.com/icoxak/26/edit

---

在这里，我们缓存当前的函数引用并添加我们自己的代码。在该代码中，我只是检查点击目标 是否具有 btn 的 class。这个测试当然可以更精确。

但是，如果没有匹配项，我们将执行原始的点击处理程序，否则我们什么都不做。

我们也可以在必要时重复此代码(例如，如果插入新行)，但我们必须确保我们自己的点击处理程序在之前被清除，这样我们就不会创建多个实例。