How to capture onchange event for a

Question

I need to capture a change event on the TD below. Whenever its contents change (in this case "Rosemount Measurement"), I need to call a function. I don't think that accepts the "onchange" attribute... so that's the problem. Can this be done?

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

I will post a print screen of a bigger portion of the code, in which the above line is included (in case it helps).

context for code

http://stackoverflow.com/questions/17470715/onchange-event-for-html-form-elements-in-td-tag-with-chrome. See this question may it will help you. — Pratik Shah, Oct 10 '14 at 07:00
Read this too http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener — GramThanos, Oct 10 '14 at 07:07

anddoutoi · Answer 1 · 2014-10-10T07:00:37.660

0

I would suggest using custom events, e.g. contentchange, and triggering it from the src that makes the content change.

Subscribe to event

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

At the content changing code

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

edited Oct 10 '14 at 07:00

answered Oct 10 '14 at 06:55

anddoutoi

9,973
4
29
28

score 0 · Answer 2 · answered Oct 10 '14 at 06:58

TD does not have a change event because it doesn't have a value, it only holds some text inside. The only way it to create a custom event for it (you need to trigger the event yourself after changing the text inside)

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>

score 0 · Answer 3 · answered Oct 10 '14 at 10:09

0

I found a solution that could work for my requirement, but I haven't adapted it yet (still trying to figure it out):

//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);

Unfortunately the two solutions provided above do not work for my requirement.

answered Oct 10 '14 at 10:09

letsplay14me

59
1
7

this works great, except for one thing: it doesn't capture changes done to the text in a ``. Please see this: [link](http://stackoverflow.com/questions/26342367/event-listener-for-td-content) – letsplay14me Oct 13 '14 at 19:47

How to capture onchange event for a

3 Answers3