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.

Answer 2

I imagine you could do that with a simple plugin:

$.fn.dataTrigger = function(name, value, callback) {
    $(this).data(name, value);
    callback(name, value);
    return this;
};

Then:

$('#conversations-uCount').dataTrigger('UnreadIDs', '1', myFunc);

Demo: http://jsfiddle.net/karim79/q6apA/1/

Answer 3

Yes there is a function called watch object.watch but its not standard, I think what your looking for can be found here Object.watch() for all browsers?