如何捕获 <td> 的 onchange 事件答案

【问题标题】：How to capture onchange event for a <td>如何捕获 <td> 的 onchange 事件
【发布时间】：2014-10-10 06:51:52
【问题描述】：

我需要在下面的 TD 上捕获更改事件。每当其内容发生变化时（在本例中为“罗斯蒙特测量”），我需要调用一个函数。我认为它不接受“onchange”属性......所以这就是问题所在。这个可以吗？

<TD style="PADDING-LEFT: 6px; CURSOR: default" id="A0.R0.Indexed Pick 3" class="fv fvu" title="Rosemount Measurement" _savedBKClr>Rosemount Measurement</TD>

我将发布更大部分代码的打印屏幕，其中包含上述行（以防有帮助）。

【问题讨论】：

stackoverflow.com/questions/17470715/…。看看这个问题可能会对你有所帮助。
也阅读这个stackoverflow.com/questions/2844565/…

标签： javascript jquery html

【解决方案1】：

TD 没有更改事件，因为它没有值，它只在里面保存一些文本。它为其创建自定义事件的唯一方法（您需要在更改内部文本后自己触发事件）

setTimeout(function() {
  $('td').text(function() {
    return this.innerHTML + '... success?';
  }).trigger('custom:td:name_whatever.event');
}, 1000);

$('td').on('custom:td:name_whatever.event', function(){
  alert(this.innerHTML);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Test</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

我建议使用自定义事件，例如contentchange，并从使内容更改的 src 触发它。

订阅活动

$('table.yourClassName').on('contentchange', 'td', fn);

在内容更改代码处

$(refToTheTd).trigger('contentchange');

【讨论】：

【解决方案3】：

我找到了一个可以满足我要求的解决方案，但我还没有适应它（仍在尝试解决）：

//assume tbl has id foobar
document.getElementById('foobar').addEventListener('change',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    var name = target.id || target.getAttribute('name');
    alert('the ' + name + ' element changed!');
},false);

很遗憾，上面提供的两种解决方案不能满足我的要求。

【讨论】：

这很好用，除了一件事：它不会捕获对 <td> 中的文本所做的更改。请看这个：link