JQuery how to listen for a element attribute/property change event

Question

JQuery 1.12.1 (inherited and can't be updated to 3)

$('#subBut').onchange(function() {
    if($('#subBut').prop('disabled')) {
        $('#reasons').slideDown();
    }
    else {
        $('#reasons').slideUp();
    }
});

How can I check for when the property of the element changes, and run the change to #reasons based on that change?

This seems surprisingly hard to do natively and some people point to plugins which I want to avoid and other (very old) questions on here relate to simply not being able to do it!

I need the event to fire when a property on an element changes; the change is caused by a range of other parts of JQuery code so it's best this is seperate and listens independant of what causes the change.

I tried things like $('#subBut').prop().onchange(function() { and similar but these are bad syntax.

It is NOT the value of the element that changes.

Most likely you can use ```mutationObserer``` for this: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver — prettyInPink, Nov 17 '21 at 14:50
@prettyInPink I had seen reference to Mutations Event but this was a plugin and wasn't suitable. I think this native development might be what I'm looking for. I will explore. Thanks. — Martin, Nov 17 '21 at 14:52
[How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) -> _"javascript dom property change event"_ -> 1. result: [Firing event on DOM attribute change](https://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change) -> [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) — Andreas, Nov 17 '21 at 14:55
@Andreas as stated I saw MutationEvent and the first answers to that original question reference something that no longer exists, so it's kinda more tricky to find the diamond in the rough there, it's always easier when you know the answer `;-)`. — Martin, Nov 17 '21 at 15:02
No, absolutely not. The second highest answer on that question -> Mutation Observer. The third comment on the accepted answer: _"These are now deprecated in favor of MutationObserver"_ -> Mutation Observer ;) — Andreas, Nov 17 '21 at 15:06

score 1 · Accepted Answer · answered Nov 17 '21 at 15:05

For reference, PrettyinPink's Comment was what was needed; looking up Mutation Observer rather than the older and more prolific Mutation Event was what was needed:

// Here we watch for new elements
const observer = new MutationObserver(function () {
    console.log('observed!');
    if($('#subBut').prop('disabled')) {
        $('#reasons').slideDown();
    }
    else {
        $('#reasons').slideUp();
    }
});

// Param 1 of observe() must be a Node - document is a valid Node, 
// but not advisable, limit the watcher to as small a context as possible
// Important here to set attributes to be true to check these. 
observer.observe(document.getElementById('subBut'), {
   attributes: true
});

JQuery how to listen for a element attribute/property change event

1 Answers1