views:

23

answers:

2

Is there any way in jQuery to attach a listener to a cell so that when the text inside the cell has changed (by JavaScript, not the user), the event is triggered?

+4  A: 

Not natively, no. You have a couple options:

1) Use setInterval() to test the value against its previous value, and act accordingly if it is different.

2) Use a common method for changing the cell contents, such that you can also perform additional logic when its value is changed without rewriting it numerous times.

mway
+3  A: 

To extend mway's answer, here is some code.

var td = $('#my-table tr td:eq(1)');
var tdHtml = td.html();
setInterval(function() {

    if (td.html() !== tdHtml) {
         // it has changed
         tdHtml = td.html();
    } 

}, 500);

... and for his second suggestion.

function updateTd(html) {
     $('#my-table tr td:eq(1)').html(html);

     // additional code
}
alex
Kudos for expanding, it's late. ;)
mway
@mway No worries, I upvoted your answer too :)
alex
is this tested to work? ;) Just curious.
Reigel
@Reigel [Works for me :)](http://jsbin.com/uqapo/edit)
alex
If this will work, I think it would be best to check if the length are equal. `if (td.html().length !== tdHtml.length) {..}` Cause I think comparison of numbers has faster performance.
Reigel
@Reigel Of course, but what if I update the `innerHTML` to have the same length of chars?
alex
if that's the case, I'll leave you with this question too. Is `"values" !== "values"` ? ;)
Reigel
@Reigel Edge cases always welcome :) I guess that will need to be documented, however, it is still a *change*, even if it may not appear to be from the end user's perspective. Also, how often will JavaScript update the `td` with encoded chars?
alex
@alex. haha nice question. and how many times did it happen to you that you have to change the `length` of `innerHTML` directly. hehe
Reigel
@Reigel I think you misunderstood me above `('bob'.length === 'tom'.length)`. That is what I was getting at. Whilst the comparison will be faster, it won't exactly be accurate ;).
alex
@alex ahh nice catch!.. and what I was thinking too is `if (td.html().length !== tdHtml.length) { changed happened } else if (td.html() !== tdHtml) { changed happened }` so if the length are not equal, no need to check the value of it. ;)
Reigel
@Reigel Oh, yeah, I get it. :) Well yes, that *would* be faster, but it smells *micro optimisationy*. I guess it would be useful if your `setInterval` interval was something like 10 microseconds :).
alex
@alex. haha with `10 microseconds`, I wonder how would it react when the length of the chars to be compared are (let's say) `Thousands` or more. And doing that without using the `comparing of length's` ;)
Reigel
Well, that is a lot of characters for a `td`. I wonder how JavaScript stores strings, if it stores the length alongside then it will be much quicker but it will be slow too if it needs to find an end of string character (I don't think it does though).
alex
Thanks, this works as expected! jQuery makes working in JS so easy that I always forget the basics.
Brandon