我可以在一个元素中有两个 jquery onclick 事件吗？答案

【问题标题】：Can I have two jquery onclick events in one element?我可以在一个元素中有两个 jquery onclick 事件吗？
【发布时间】：2013-06-16 16:20:36
【问题描述】：

我知道以前有人问过这个问题，但我什至无法完全理解如何在一次单击中添加我的特定功能。

当前点击代码：

<a class="thumbLinkCart" href="#" onclick="simpleCart.add('name=lemon','price=7.99','image=images/thumbs/yellowgold.jpg');return false;"></a>

要添加的第二个事件：

<script>
    $(document).ready(function() { 
      $('#demo12').click(function() { 
   $.growlUI('Item added to cart'); 
}); 
}); 
</script>

请有人帮我将第二个函数添加到第一个 onclick 事件中。

【问题讨论】：

删除内联事件处理程序并用 jQuery 绑定它们。
还添加id='demo12'属性，jQuery可以找到链接
谢谢，工作就像一个魅力！

标签： jquery onclick

【解决方案1】：

您可以将多个事件（类似的）绑定到同一个元素。但是，如果您使用内联事件处理程序绑定事件，则最多可以定义一个事件。

注意： 使用 javascript 绑定事件总是一个更好的主意，因为它保持关注点分离并出于可维护性目的。

您可以将多个事件绑定到您的 JS 代码中的元素，这样更简洁

jQuery

 $('#demo12').on('click', function() { 
    alert('1st click event');
    //  Add items to the cart here
});

$('#demo12').on('click', function() { 
    alert('2nd click event');
    //  Do something else
});

原版 Javascript

document.querySelector('#demo12').addEventListener('click', function() { 
    alert('1st click event');
    //  Add items to the cart here
});

document.querySelector('#demo12').addEventListener('click', function() { 
    alert('2nd click event');
    //  Do something else
});

Check Fiddle

【讨论】：

+1 因为这种技术允许我使用不同的选择器两次将点击事件应用于一个元素。（例如 - 按钮特定功能，以及所有按钮的功能）。谢谢！
@JeremyPridemore.. 很高兴能帮上忙 :)
@Sushanth-- 事件的执行顺序是什么
@irfandar 绑定事件的顺序。

【解决方案2】：

使用onclick 属性通常被认为是不好的做法。它将太多的结构 (HTML) 与行为 (JavaScript) 混合在一起。

为什么不一起做呢？

<a class="thumbLinkCart" href="#">Link</a>

和

<script>
  $(document).ready(function() { 
    $('.thumbLinkCart').click(function() {
      simpleCart.add('name=lemon','price=7.99','image=images/thumbs/yellowgold.jpg'); 
      $.growlUI('Item added to cart'); 
    }); 
  }); 
</script>

【讨论】：

哇，这太高效了，而且效果很好……非常感谢。我必须更多地阅读 js...

【解决方案3】：

尝试替换“return false;”使用“event.preventDefault();”。这应该让事件向上传播，以便触发点击处理程序，但仍会阻止 a-href 导航。

【讨论】：