单击锚文本时如何触发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事件添加到元素？