使用 change() 检测属性值的变化

use change() to detect changes of attribute value

本文关键字:变化 属性 检测 change 使用      更新时间:2023-09-26

可能吗?例如,我想检测div 的宽度,将其与 on() 绑定以执行某些操作。

var widthVal= $('#panel').width();
$(widthVal).on('change', function(){
});

然后我创建了一个按钮来增加 #panel 的宽度,但没有任何反应。

使用 change() 来检测属性值的变化吗? 有意义吗?

简单的答案是使用突变事件。

但是,它们已被弃用,并且未得到广泛支持。

我认为您最好的选择是使用计时器定期检查 CSS 属性是否已更改;

var $panel = $('#panel');
var width = $panel.width();
$panel.on('resized', function () {
  // do something!
});
setInterval(function () {
  if ($panel.width() !== width) $panel.trigger('resized');
}, 50);

我建议使用以下方法 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);