Question

我的body标签中的数据段属性由滑块更改。我需要在更改时根据此值触发一个函数。

我不知道在这种情况下如何附加事件监听器？

Answer 1

`当DOM节点属性发生变化时，没有可靠的跨浏览器方式来接收事件。有些浏览器支持“DOM变异事件”，但你不应该依赖它们，而且你可以谷歌那句话来了解该技术的命运多变的历史。

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

Answer 2

由于在我的用例中，无论如何我的所有.data('type', 'value')都设置在javascript块内，所以在我的情况下，我只在.change()后面放了一个.data(...)链，并使用普通的$("#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()。 / p>

Answer 3

您可以使用MutationObserver这是一个API available in every browser，并避免使用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

如何监视jQuery中body'data'属性的变化？

3 个答案: