如何监视 jQuery 中主体“data”属性何时更改

How to monitor when the body 'data' attribute changes in jQuery?

本文关键字：data 属性 何时更 主体 何监视 监视 jQuery      更新时间：2023-09-26

我的身体标签中有数据段属性，该属性由滑块更改。当它被更改时，我需要根据这个值触发一个函数。

不过，我不确定在这种情况下如何附加事件侦听器？

'当 DOM 节点属性发生更改时，没有可靠的跨浏览器方法来接收事件。一些浏览器支持"DOM 突变事件"，但你不应该依赖它们，你可以谷歌这个短语来了解该技术的命运多舛的历史。

如果滑块控件不触发自定义事件（我认为大多数现代控件都会触发），那么最好的办法是设置一个setInterval()方法来轮询值。

您可以使用MutationObserver，这是每个浏览器中可用的API，并避免使用setInterval进行轮询。如果你在 element 中引用了你的元素，你可以这样做：

const mutationObserver = new MutationObserver(callback);
mutationObserver.observe(element, { attributes: true });
function callback() {
  // This function will be called every time attributes are
  // changed, including `data-` attributes.
}

使用此 API 可以轻松检测到元素中的其他更改，您甚至可以获取在回调中更改的属性的旧值和新值，从而在调用 observe 时调整配置对象。所有关于这方面的文档都可以在MDN中阅读：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit

由于在我的用例中，我的所有.data('type', 'value')都是在 javascript 块中设置的，所以在我的情况下，我只是在.data(...)之后放置一个.change()链并使用正常$("#oh-my-data").change()访问更新

这对我来说很好用，请参阅演示。

$("#oh-my-data").change(function() {
  $("#result").text($("#result").text() + ' ' + $(this).data('value'));
})
$("#oh-my-data").data('value', 'something1').change();
$("#oh-my-data").data('value', 'something2').change();
$("#oh-my-data").data('value', 'something3').change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="oh-my-data" type="hidden" data-value="" /> Result: <span id="result"></span>

但是这个解决方案有一个问题，那就是如果.data()是由外部库设置的，那么这将不起作用，因为您无法在其上添加.change()。

相关文章：