如何根据 jQuery 的数据 API 中的值分配委托的 jQuery 事件侦听器？

Question

jQuery 处理interesting way 中的数据属性，其中它检索值一次 并且在该点之后不观察更改或删除。数据的修改是通过使用 jQuery 的各种函数来实现的——$element.data('key', 'val') 等。因此，它会混淆代码来执行$element.prop('data-key', 'val') 和$element.removeProp('data-key', 'val') 之类的操作，因为这不接触 jQuery 数据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 分配委托侦听器？

Answer 1

尝试使用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>

jsfiddle http://jsfiddle.net/a7qcafwf/1/