jQuery stopPropagation与未来的元素？

Question

我有一个简单的表，有两个tr。

每个td上的最后tr即将（将来）插入button：

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个提醒：“按钮”

然而，我无法阻止传播，因为它到达“身体”时已经太晚了

也 - 我无法改变Tr的“onclick”

我该怎么办？

JSBIN

修改

澄清。 （对不起，我应该强调这一点）：

这些按钮（动画中的问号）是可以添加到任何HTML ELEMENT CONTAINER的工具提示 - 所以在编译时 - 我不知道它会在哪里： （这就是为什么我把他们的onclick绑定到“body”）

你可以看到，当我按下问号时 - 整个“tr”认为我按下它并显示数据（我不希望它显示数据）。

所以我不知道Js插件将插入此按钮/问号的位置......

Answer 1

我会事先热补丁现有的inline click handlers，如下：

$( ".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

---

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

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

我们也可以在必要时重复此代码（例如，如果插入新行），但我们必须确保我们自己的点击处理程序被清除，因此我们不创建多个实例

Answer 2

您可以更加具体地选择要附加click事件的选择器：

$(".myTable tr td").on('click', ".btn", function (e){
  e.stopPropagation();
  alert('button');

});

Answer 3

将.on()附加到td，然后使用stopPropagation()阻止冒泡并触发tr上的内嵌点击处理：

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

JSBin

Answer 4

你也可以这样做：

http://jsbin.com/icoxak/21/edit

$('tr[onclick]').each(function(){
  this._onclick = this.onclick;
  this.removeAttribute('onclick');
});

$("body").on('click',".myTable tr",function (e){
  if(!$(e.target).hasClass('btn'))
       this._onclick.apply(this,arguments);
});