Set handler for change event on a DOM element using jQuery

Question

I would like to run a function every time a specific DOM element is manipulated.

Example:

I manipulate the data-expertize attribute of an element having the class .milestones-chain:

$(".milestones-chain").data("expertizes","<%= @challenge.root.expertizes %>");

I would like this to trigger a function automatically.

I tried this:

$(document).on('change','.milestones-chain', function() {
    alert("trigger my function");
});

But it doesn't seem to work. What should I do?

by changing the data-* attribute it does not mean that you have changed the value of element — bugwheels94, Jun 08 '13 at 05:22
I didn't say that, did I? I now that on('change' is the problem. That's why I need help... — ndemoreau, Jun 08 '13 at 05:25
here you can find some answers about this subject [Detect element content changes with jQuery][1] [1]: http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery — medBouzid, Jun 08 '13 at 05:29
@ndemoreau then you will either need timed function which call themselves automatically or why don't you call the function manually after changing the data attribute — bugwheels94, Jun 08 '13 at 05:31
What kind of a DOM element are we dealing with here? Select, input, div? — kushyar, Jun 08 '13 at 05:37
@ankit the idea is to have the equivalent of an after_update callback. As my element can be modified through different ways, I think it would be safer to have this kind of callback rather than calling the functions manually every time. I don't think timed function would work as it should be triggered instantly after my manipulation. Thx for you help! ;-) — ndemoreau, Jun 08 '13 at 05:39

score 2 · Accepted Answer · edited May 23 '17 at 10:28

Working jsFiddle Demo (with version 1.8.3)

Before jQuery 1.9, there are event handlers for working with data:

setData - fired whenever setting a data
getData - fired whenever getting a data

However there are no documents in jQuery site, and it's removed from jQuery 1.9.

$(function () {
    $('.milestones-chain').on('setData', function (e, k, v) {
        alert('[CHANGED] ' + k + ' : ' + v);
    });

    $('.milestones-chain').data('expertizes', '12345');
});

If you run this code by jQuery 1.8, you get the alert. The event fired by setting a data to the element. Btw, it won't work with jQuery 1.9 and upper.

Working jsFiddle Demo (with version 1.10.1)

You can take this feature back to new versions of jQuery.
(I take it from this question: JQuery 1.9 not triggering setData event).

(function () {
    var olddata = $.fn.data;
    $.fn.data = function (key, value) {
        olddata.call(this, arguments);
        if (value !== undefined) $(this).trigger('setData', [key, value]);
    };
})();

Just add it at the first line of your script.

I'm running 1.7.2 and it doesn't seem to work. This was THE solution however. too bad that it has been deprecated in 1.9... — ndemoreau, Jun 08 '13 at 06:35
@ndemoreau It works with version 1.7.2 too, see [jsFiddle](http://jsfiddle.net/MyBMw/2/). I think that this event, doesn't support **event delegation**, you must attach it directly to the element. — , Jun 08 '13 at 06:39

Set handler for change event on a DOM element using jQuery

1 Answers1