單擊錨文本時如何觸發onclick事件

Question

我想在用戶單擊“遠程項目”時使用Javascript觸發onclick事件。 下面給出的是實際可用的代碼。 問題是我看不到任何ID，類來標識對此錨文本的單擊。 任何想法如何做到這一點？

<a href="javascript:removeCartItem('ci6223000698')">Remove Item</a>

提前致謝。

羅伊

Answer 1

您可以使用此選擇器[href="#"]附加點擊事件，並設置屬性data-value 。

運行以下代碼片段：

 var removeCartItem = function(value) { console.log(`You're about to remove this item: ${value}`); }; var anchors = document.querySelectorAll('[href="#"]'); for (a of anchors) { a.addEventListener('click', function(e) { removeCartItem(e.target.getAttribute('data-value')); }); } 

 <a href="#" data-value='ci6223000698'>Remove Item</a> <a href="#" data-value='ci6223000677'>Remove Item</a> 

看到？ 該值是從函數removeCartItem打印出來的。

jQuery獎勵

使用.data()看起來更好。

存儲與匹配的元素關聯的任意數據，或在匹配的元素集中的第一個元素的命名數據存儲中返回值。

運行以下代碼片段：

 var removeCartItem = function(value) { console.log(`You're about to remove this item: ${value}`); }; $('[href="#"]').click(function() { removeCartItem($(this).data('value')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" data-value='ci6223000698'>Remove Item</a> <a href="#" data-value='ci6223000677'>Remove Item</a> 

Answer 2

您需要添加一個EventHandler ：

<a href="#" id="remove" onclick="myFunction('ci6223000698')">Remove Item</a>

而您需要具有以下功能：

function myFunction(myVar) { //... }

或者，如果您喜歡添加處理程序js端：

document.getElementById('remove').addEventListener("click", function() {
  // your stuff
})

或使用jQuery：

$('#remove').click(function() { //.... })

擺弄的例子：

https://jsfiddle.net/txy5tyg2/1/

進一步閱讀：

addEventListener與onclick

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Answer 3

您可以檢索所有標記並添加事件偵聽器。

您可以在此處找到示例， 如何將click事件添加到元素？