如何使用jQuery访问其自己的事件处理程序中的元素数据？

Question

我想在其自己的事件处理程序中检索按钮的data属性。我最后尝试了HTML的以下jQuery代码。但按钮似乎没有像我预期的那样响应：

$('btn.btn-add-layer').on('click', function() {
  var layertype = $(this).data('layertype');
  alert('type : ' + layertype);
});

有人可以帮忙解释如何解决上述问题，以便按钮可以告诉data吗？

由于

HTML：

<button data-layertype="base" class="btn btn-primary btn-xs btn-add-layer">OK</button>

- 编辑 -

感谢所有帮助过的人。正如我怀疑并在两个答案中指出的那样，这是一个错字。我在考虑button.btn-...，但写了btn.btn-...。

Answer 1

$('.btn.btn-add-layer').on('click', function() {
  var layertype = $(this).data('layertype');
  alert('type : ' + layertype);
});

你的选择器有点乱了！

Answer 2

你必须选择带按钮的按钮.btn-add-layer你的代码必须是：

 $('button.btn-add-layer').on('click', function() {
  var layertype = $(this).data('layertype');
  alert('type : ' + layertype);
 });

更多关于来自here

的jquery按钮选择器

Answer 3

有两种方法可以做到这一点，fastest就是这样：

$('.btn.btn-add-layer').on('click', function() {
  var layertype = this.getAttribute("data-layertype");
  alert('type : ' + layertype);
});

您的选择器也出现错误，请改为$('button.btn.btn-add-layer')。