检测属性值的属性改变我做的

我在HTML data-select-content-val创build了一个属性，并dynamic地填充了信息。

有没有办法检测属性的值何时更改？

 $(document).on("change", "div[data-select-content-val]", function(){ alert("BOOP!"); }); 

Answer 1

你将不得不观看DOM节点的变化。 有一个名为MutationObserver的API，但是对它的支持看起来非常有限。 这个答案有一个API的状态的链接，但似乎目前还没有在IE或Opera的支持。

解决这个问题的一种方法是让修改data-select-content-val属性的代码部分派发一个你可以听的事件。

例如，请参阅http://jsbin.com/arucuc/3/edit关于如何将它们结合在一起。;

这里的代码是

 $(function() { // Here you register for the event and do whatever you need to do. $(document).on('data-attribute-changed', function() { var data = $('#contains-data').data('mydata'); alert('Data changed to: ' + data); }); $('#button').click(function() { $('#contains-data').data('mydata', 'foo'); // Whenever you change the attribute you will user the .trigger // method. The name of the event is arbitrary $(document).trigger('data-attribute-changed'); }); $('#getbutton').click(function() { var data = $('#contains-data').data('mydata'); alert('Data is: ' + data); }); }); 

Answer 2

有这个扩展添加一个事件监听器属性的变化。

用法：

 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script> 

将attrchange处理函数绑定到选定的元素

 $(selector).attrchange({ trackValues: true, /* Default to false, if set to true the event object is updated with old and new value.*/ callback: function (event) { //event - event object //event.attributeName - Name of the attribute modified //event.oldValue - Previous value of the modified attribute //event.newValue - New value of the modified attribute //Triggered when the selected elements attribute is added/updated/removed } }); 

Answer 3

您可以使用MutationObserver来跟踪属性更改，包括data-*更改。 例如：

 var foo = document.getElementById('foo'); var observer = new MutationObserver(function(mutations) { console.log('data-select-content-val changed'); }); observer.observe(foo, { attributes: true, attributeFilter: ['data-select-content-val'] }); foo.dataset.selectContentVal = 1; 

  <div id='foo'></div>