使用$（本），以獲得數據屬性犯規返回實際結果

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") 

- >它返回「 myModal」

但當我

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

- >它返回的整個對象[a.btn就地階]

爲什麼？

Answer 1

這種行爲是完全正確的。如果你看看jQuery的文檔，你會看到：

jQuery on:

。對（事件[，選擇] [數據]，處理器（eventObject）傳遞）
返回：jQuery的

jQuery data:

。數據（密鑰）
ř eturns：對象

這意味着當您撥打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',...);將允許您將兩個處理程序（一個click和一個hover）連接到相同的元素。

它也沒有意義了on到別的任何回報，因爲它只是一個附加處理程序的元素。它僅僅因爲你附加了一個事件處理程序而沒有給你任何價值。

現在，如果您想在事件被觸發時採取任何行動，您需要在處理程序的callback函數中執行該操作。例如。

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

將提醒用戶點擊元素的data-confirm-modal屬性值。但是，如果沒有alert()部分（即寫入原始代碼的方式），則只讀取該值，但不會執行任何操作。