使用$（this）获取数据属性不会返回实际结果

Question

我是javascript / jquery的新手，我一直在网上搜索，但没有得到满意的答案。 （如果有人可以指出类似的问题，我会删除它）

在hmtl中我有

<a href="#" class='btn-place-order' data-clicked=false data-confirm-modal="myModal">Submit</a>

在控制台中，我尝试了这个

$('.btn-place-order').data("confirm-modal") 

- ＆GT;它返回“myModal”

但是当我尝试

时

$(".btn-place-order").on("click", function(e){ $(this).data("confirm-modal"); });

- ＆GT;它返回整个对象[a.btn-place-order]

为什么？

Answer 1

这种行为完全正确。如果你看一下jQuery文档，你会看到：

jQuery on:

  

.on（events [，selector] [，data]，handler（eventObject））
  返回：jQuery

jQuery data:

  

.data（key）
  返回：对象

这意味着，当您致电var myObject = $('.btn-place-order').data("confirm-modal");时，其中将包含data-属性的值。

但是，当您调用$(".btn-place-order").on("click", function(e){ $(this).data("confirm-modal"); });时，会返回一个jQuery对象。这个jQuery对象与$(".btn-place-order")已经返回的对象相同，这对于使jQuery的chaining概念起作用非常重要。

Chaining允许您按顺序执行多个方法，而无需反复获取原始jQuery对象。例如，$(".btn-place-order").on('click',...).on('hover',...);允许您将两个处理程序（click和hover）附加到同一元素。

on返回任何其他内容也没有意义，因为它只是将一个处理程序附加到元素上。它真的不会因为你附加一个事件处理程序而给你任何价值。

现在，如果您想在触发事件时采取任何操作，则需要在处理程序的callback函数中执行该操作。例如。

$(".btn-place-order").on("click", function(e){ alert($(this).data("confirm-modal");) });

将提醒用户所点击的元素的data-confirm-modal属性值。但是，如果没有alert()部分（即编写原始代码的方式），则只读取该值，但不会执行任何操作。