侦听元素禁用事件

Question

有没有办法监听disabledDOM属性的变化？

像这样的东西:

setTimeout(function () {
    $("#myElem").prop('disabled', true);
}, 1500);

$("#myElem").on('disabled', function(e){
    alert('my custom code');
});

这也是一个小提琴.

编辑:如果可能的话,我想要一个通用的解决方案.例如,在我的应用程序中,我正在使用MVVM框架(Knockout),它在内部处理属性更改:

<button data-bind="disable: time > 3">
</button>

我正在声明禁用逻辑,但我没有手动禁用它.我想手动做的是挂钩那个事件,所以我可以做我的自定义逻辑.

我在SO上看到了一个例子:

jQuery.propHooks.disabled = {
  set: function (el, value) {
    if (el.disabled !== value) {
      el.disabled = value;
      value && $(el).trigger('disabledSet');
      !value && $(el).trigger('enabledSet');
    }
  }
};

但这似乎不起作用.

Answer 1

您应该使用Mutation Observers:

// Set up a new observer
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Check the modified attributeName is "disabled"
        if(mutation.attributeName === "disabled") {
            alert("disabled changed");
        }
    });    
});
// Configure to only listen to attribute changes
var config = { attributes: true };
// Start observing myElem
observer.observe(myElem, config);

// Testing the observer gets triggered
setTimeout(function() {
    myElem.disabled = true;
}, 2000);

<input id="myElem">

虽然应该注意现代浏览器支持非常好,但不支持IE <= 10.您可能能够在IE9/10中使用较旧的Mutation事件,但它们不受支持.如果做不到这一点,setInterval可以用来"观察"元素,但这只能作为最后的手段使用.