javascript - jQuery stopPropagation 与 future 元素？

Question

我有一个简单的表，其中有 2 个 tr。

每个 tr 上的最后一个 td 即将(将来)用 按钮 插入:

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

插入后:

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

看起来像这样:

这些按钮应该有 onClick 事件(它们没有内联 onclick)，因此我将 onclick 附加到正文:

$("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)到“body”)

你可以看到，当我按下问号时 - 整个“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的类。当然，这个测试可以更精确。

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

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