如何根据jQuery's数据API

How can I assign a delegated jQuery event listener based on values in jQuery's data API?

本文关键字：数据 API 何根 jQuery      更新时间：2023-09-26

jQuery以一种有趣的方式处理数据属性，其中它检索值一次，并且在该点之后不观察到更改或删除。数据的修改是通过使用jQuery的各种函数$element.data('key', 'val')等来实现的。因此，它混淆了代码来执行$element.prop('data-key', 'val')和$element.removeProp('data-key', 'val')之类的操作，因为该不会触及jQuery data API，尽管这些调用似乎是要这样做的。

然而，这种更改DOM的方法似乎是成功使用委托事件侦听器的数据属性的唯一方法"jQuery方式："

$element.on('click', '[data-key=val]', function(e) {
  // only triggers on children of $element that have the DOM attribute
  // data-attribute data-key, with a value of val
});

数据属性不会阻塞类名等，并且似乎是放置某些元素属性以供JavaScript使用的合理位置。但现在，如果我编写$element.find('div').data('key', 'val')，这些元素在单击时将不符合标准。实现这一点的唯一方法是说$element.find('div').prop('data-key', 'val')，据我所知，这不是最佳实践

另一种选择是：

$element.on('click', 'div', function(e) {
  if ($(this).data('key') != 'val') return;
  // handle
});

这看起来很笨拙，而且会比上面更频繁地触发。我们的实际目标也不太清楚。

如果没有授权，我可以写：

$element.find('div')
  .filter(function() { return $(this).data('key') == 'val'; })
  .on('click', function(e) {
    // handle
  });

但是.filter()不适用于只接受字符串选择器的委托侦听器。

所以问题是：我已经有了多种解决方案，但没有一个是理想的，也没有一个真正遵循jQuery的习惯用法。如何基于jQuery Data API分配委派侦听器？

尝试使用HTMLElement.dataset

$(document).on("click", "[data-clickable=true]", function(e) {
  alert(this.dataset.clickable)
});
// set `div` `dataset.clickable` to `true`
$("button").on("click", function() {
  $("div")[0].dataset.clickable = true;
  $("[data-clickable=true]").html("clickable: true")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>make `div` "clickable"</button>
<div data-clickable="false">clickable: false</div>

jsfiddlehttp://jsfiddle.net/a7qcafwf/1/

相关文章：