jQuery how to Bind on a data bind?

Question

<div id="conversations-uCount">0</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#conversations-uCount').data('UnreadIDs', '1');
});
</script>

How can I set a bind so that any time the UnreadIDs changes I can run a function?

Thanks

Answer 1

In jQuery 1.4.4+ there's an event triggered for this, changeData. If that's the only data you're dealing with on the object, your handler is as simple as:

$('#conversations-uCount').bind("changeData", function() {
  //data changed, do something, for example:
  alert("Data changed!, new value for UnreadIDs: " + $.data(this, 'UnreadIDs'));
});

You can test it out here.