2

我有一个简单的表，它有 2 个 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 绑定到“身体”）

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

在此处输入图像描述

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

4

4 回答 4

2

我会预先对现有的进行热补丁，如下所示：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

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

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

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

于 2013-06-17T11:26:02.697 回答
1

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

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

});
于 2013-06-17T11:17:22.800 回答
1

附加.on()到td, 并用于stopPropagation()防止冒泡和触发 上的内联点击处理程序tr：

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

JSBin

于 2013-06-17T11:17:45.100 回答
0

你也可以这样做：

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);
});
于 2013-06-17T11:14:18.660 回答