0

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

在 hmtl 我有

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

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

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

--> 它返回“myModal”

但是当我尝试

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

--> 它返回整个对象 [a.btn-place-order]

为什么 ？

4

1 回答 1

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工作理念非常重要。

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

on返回任何其他内容也没有任何意义，因为它只是将处理程序附加到元素。仅仅因为您附加了一个事件处理程序，它实际上并没有给您任何价值。

现在，如果您想在事件触发时采取任何行动，您将需要在处理程序的callback函数内部采取该行动。例如

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

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

于 2013-10-18T21:48:01.140 回答