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
2010-10-08 05:43:37
+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
2010-10-08 05:50:01
Kudos for expanding, it's late. ;)
mway
2010-10-08 05:55:35
@mway No worries, I upvoted your answer too :)
alex
2010-10-08 05:56:43
is this tested to work? ;) Just curious.
Reigel
2010-10-08 05:59:06
@Reigel [Works for me :)](http://jsbin.com/uqapo/edit)
alex
2010-10-08 06:06:55
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
2010-10-08 06:06:57
@Reigel Of course, but what if I update the `innerHTML` to have the same length of chars?
alex
2010-10-08 06:07:38
if that's the case, I'll leave you with this question too. Is `"values" !== "values"` ? ;)
Reigel
2010-10-08 06:25:22
@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
2010-10-08 06:27:47
@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
2010-10-08 06:30:48
@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
2010-10-08 06:32:50
@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
2010-10-08 06:38:34
@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
2010-10-08 06:42:08
@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
2010-10-08 06:47:37
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
2010-10-08 06:50:59
Thanks, this works as expected! jQuery makes working in JS so easy that I always forget the basics.
Brandon
2010-10-08 13:47:30