JQuery 如何监听元素属性/属性更改事件

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.

Answer 1

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
});