收聽元素禁用事件

有沒有辦法監聽disabled DOM屬性更改？收聽元素禁用事件

事情是這樣的：

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

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

這裏也是一個fiddle.

編輯：如果可能的話，我想一個通用的解決方案這一點。舉例來說，在我的應用程序，我使用的是MVVM框架（淘汰賽），即內部處理的物性變化：

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

我宣佈禁止邏輯，但我沒有手動禁用它。我想要手動完成的事情是鉤住這個事件，所以我可以做我的自定義邏輯。

我見過的example這裏SO：

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

但這似乎並沒有工作。

來源

2015-06-24 Zubzob

你應該使用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">

但是，應當指出的是，modern browser support非常好，不支持IE < = 10。你可能能夠讓舊的Mutation events工作在IE9/10，但他們不支持很好。如果不能，setInterval可以用來「觀察」元素，但只能用作最後的手段。

來源

2015-06-24 13:44:06 CodingIntrigue

男人，我想你可以在這裏做一些邏輯。如果您要使用JavaScript來禁用該元素，爲何不將您想要的回調插入「disabler」方法中？

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

var callback = function(){ 
    alert('my custom code'); 
};

我的意思是：http://jsfiddle.net/fbtpdv9f/6/

是更清潔（：

來源

2015-06-24 13:47:47

你可以有一個時間間隔，以檢查其是否禁用

setTimeout(function() { 
 
    $("#third").prop('disabled', true); 
 
    }, 1500); 
 
var test=window.setInterval(function(){ 
 
    var d=$('#third').attr('disabled'); 
 
    if(d=='disabled'){ 
 
     alert('my custom code'); 
 
     clearInterval(test); 
 
    } 
 
}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<button type="button">first</button> 
 
<button type="button">second</button> 
 
<button type="button" autofocus id="third">third</button>

來源

2015-06-24 13:50:05 depperm

收聽元素禁用事件

回答

相關問題