所以问题是我有一个 html 元素，它在“data-”属性中有一个对象（通过 jQuery ofc 设置），并且我想监听该属性的更改。
我已经尝试了很多事情，比如在MutationObserverInit 对象 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit，但这些都没有帮助。
有人知道这是否可能吗？
$('#some-id').click( function() {
//$('#some-id').attr('title', 'some-title'); //this works
$('#some-id').data('foo', 'bar1'); //this don't
});
var functionCallBack = function(mutations) {
alert('something changed')
}
// select the target node
var target = document.getElementById("some-id");
// create an observer instance
var observer = new MutationObserver(functionCallBack);
// configuration of the observer:
var config = { subtree: true, childList: true , attributes: true};
// pass in the target node, as well as the observer options
observer.observe(target, config);
$('#some-id').data('foo', 'bar');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-id">HEY</div>
新答案（基于奥里奥尔的回答 https://stackoverflow.com/a/41539655/1347953):
我认为 Oriol 提供了更好的方法，但还可以进一步优化。
var object = {
'key': 'value'
};
$('.addObj').click(function() {
$('#some-id').observeData('foo', object, function() {
console.log("Object Added");
});
});
$('.removeObj').click(function() {
$('#some-id').observeData('foo', null, function() {
console.log("Object removed");
});
});
jQuery.fn.observeData = function(name, object, callback) {
// Get elemenet
var element = $(this[0]);
// Add data
element.data(name, object);
// Call the callback function
callback();
// Return this for a chainable function
return this;
};
span {
padding: 10px;
float: left;
margin: 5px;
cursor: pointer;
background-color: green;
border: 1px solid black;
border-radius: 5px;
transition: all 0.5s;
color: white;
font-size: 13px;
}
span:hover {
opacity: 0.8;
}
#some-id {
text-align: center;
width: 100%;
margin: 10px 0;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-id">HEY</div>
<span class='addObj'>Add Object</span>
<span class='removeObj'>Remove Object</span>
JSFiddle：https://jsfiddle.net/t012rb9j/1/ https://jsfiddle.net/t012rb9j/1/
旧答案：
正如您在代码中所述：
$('#some-id').click(function() {
// $('#some-id').attr('title', 'some-title'); //this works
$('#some-id').data('foo', 'bar1'); //this don't
});
.attr() 有效，而 .data() 无效。原因是 .attr()adds数据时 HTML 标记的属性值stores内存中的这些数据。
来自 jQuery 文档：
.data() https://api.jquery.com/jquery.data/：存储与指定元素关联的任意数据和/或返回设置的值。
.attr() https://api.jquery.com/attr/：获取匹配元素集中第一个元素的属性值，或为每个元素设置一个或多个属性
匹配的元素。
检测数据更改（如果要存储对象）的一种方法是将这两个函数结合起来。
var object = {
'key': 'value'
};
$('.addObj').click(function() {
$('#some-id').data('foo', object).attr("data-attached", "true");
});
$('.removeObj').click(function() {
$('#some-id').data('foo', null).attr("data-attached", "false");
});
var functionCallBack = function(mutations) {
mutations.forEach(function(mutation) {
if (jQuery(mutation.target).attr("data-attached") == "true") {
// Your code here
console.log("Object Added");
} else {
console.log("Object removed");
}
});
}
// select the target node
var target = document.getElementById("some-id");
// create an observer instance
var observer = new MutationObserver(functionCallBack);
// configuration of the observer:
var config = {
subtree: true,
childList: true,
attributes: true
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
.addObj, .removeObj {
padding: 10px;
float: left;
margin: 5px;
cursor: pointer;
background-color: green;
border: 1px solid black;
border-radius: 5px;
transition: all 0.5s;
color: white;
font-size: 13px;
}
.addObj:hover, .removeObj:hover {
opacity: 0.8;
}
#some-id {
text-align: center;
width: 100%;
margin: 10px 0;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-id">HEY</div>
<span class='addObj'>Add Object</span>
<span class='removeObj'>Remove Object</span>
JSFiddle：https://jsfiddle.net/9xkb6jv4/ https://jsfiddle.net/9xkb6jv4/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
