jQuery 检测我所做的属性值的属性更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16781778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting attribute change of value of an attribute I made
提问by Majo0od
I created an attribute in HTML data-select-content-valand it is stuffed with information dynamically.
我在 HTML 中创建了一个属性，data-select-content-val它动态地填充了信息。
Is there a way to detect when the attribute's value has changed?
有没有办法检测属性值何时发生变化？
$(document).on("change", "div[data-select-content-val]", function(){
alert("BOOP!");
});
采纳答案by martineno
You would have to watch the DOM node changes. There is an API called MutationObserver, but it looks like the support for it is very limited. This SO answerhas a link to the statusof the API, but it seems like there is no support for it in IE or Opera so far.
您必须观察 DOM 节点的变化。有一个名为 的 API MutationObserver，但看起来对它的支持非常有限。这个 SO答案有一个指向API状态的链接，但到目前为止，IE 或 Opera 似乎不支持它。
One way you could get around this problem is to have the part of the code that modifies the data-select-content-valattribute dispatch an event that you can listen to.
您可以解决此问题的一种方法是让修改data-select-content-val属性的代码部分调度一个您可以收听的事件。
For example, see: http://jsbin.com/arucuc/3/editon how to tie it together.
例如，请参阅：http: //jsbin.com/arucuc/3/edit，了解如何将其绑定在一起。
The code here is
这里的代码是
$(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);
});
});
回答by nkron
You can use MutationObserverto track attribute changes including data-*changes. For example:
您可以使用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>
回答by Shimmy Weitzhandler
There is thisextensions that adds an event listener to attribute changes.
有这个扩展为属性更改添加了一个事件侦听器。
Usage:
用法：
<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>
Bind attrchange handler function to selected elements
将 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
}
});
