使用change（）來檢測屬性值的變化

Question

是否有可能？我想檢測例如div的寬度，與（）做一些事情綁定吧..

var widthVal= $('#panel').width(); 

$(widthVal).on('change', function(){ 

}); 

然後我創建了一個按鈕來增加#panel的寬度，但沒有發生..

利用的變化（）來檢測的屬性值的變化？合理？

Answer 1

簡單的答案是使用mutation events。

但是，他們一直deprecated，而不是廣泛的支持。

我認爲最好的辦法是用一個定時器來定期檢查CSS屬性發生變化;

var $panel = $('#panel'); 
var width = $panel.width(); 

$panel.on('resized', function() { 
    // do something! 
}); 

setInterval(function() { 
    if ($panel.width() !== width) $panel.trigger('resized'); 
}, 50); 

Answer 2

我會建議使用以下方法http://jsfiddle.net/krasimir/5PXnv/

HTML

<div>test</div> 

JS

var changeWidth = function(el, width) { 
    el.css("width", width + "px"); 
    el.trigger("width-changed"); 
} 
var div = $("div"); 
div.on("width-changed", function() { 
    console.log("changed"); 
}); 
setTimeout(function() { 
    changeWidth(div, 200); 
}, 1000);