如何在单击锚文本时触发onclick事件

Question

每当用户点击“Remoe Item”时，我想使用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 side：

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

或使用jQuery：

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

小提琴中的例子：

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

进一步阅读：

addEventListener vs onclick

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

Answer 3

您可以检索所有标记并添加事件监听器。

你可以在这里找到例子， How to add click event to an element?