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

I know this has been asked before but I can't quite get the syntax of how to add my particular functions in one onclick even.

我知道之前已经问过这个问题,但是我甚至无法获得如何在一个onclick中添加我的特定函数的语法。

Current onclick code:

当前的onclick代码:

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

Second event to be added:

要添加的第二个事件:

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

Could someone help me add the second function to the first onclick event please.

有人可以帮助我将第二个功能添加到第一个onclick事件中。

3 个解决方案

#1

You can have multiple events (similar) bound to the same element. But if you bind the events using inline event handler, you can utmost have one event defined.

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

NOTE : Always a better idea to bind events using javascript, since it maintains separation of concerns and for maintainability purposes.

注意:总是更好的想法使用javascript绑定事件,因为它保持关注点的分离和可维护性目的。

You can bind multiple events to the elements in your JS code instead which is lot cleaner

您可以将多个事件绑定到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
});

Vanilla 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

#2

Try to replace "return false;" with "event.preventDefault();". That should let the event propagate up so the click handler triggers, but still stop the a-href from navigating.

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

#3

It's generally considered bad practice to use the onclick attribute. It mingles too much of the structure (HTML) with the behaviour (JavaScript).

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

Why not do it all together?

为什么不一起做呢?

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

And

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

#1