Can I have two jquery onclick events in one element?

Question

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.

Current onclick code:

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

Remove the inline event handler and bind them both with jQuery. — Matt Ball, Jun 19 '13 at 23:27
also add `id='demo12'` attribute, that jQuery can find the link — metadings, Jun 19 '13 at 23:30

Sushanth -- · Answer 1 · 2016-10-07T18:17:58.893

22

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.

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

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

edited Oct 07 '16 at 18:17

answered Jun 19 '13 at 23:28

Sushanth --

55,259
9
66
105

3

+1 because this technique allows me to apply a click event to a element twice using different selectors. (e.g. - button specific function, and function to all buttons). Thanks! – Jeremy Pridemore Dec 15 '13 at 13:20
@JeremyPridemore.. Glad to have helped :) – Sushanth -- Dec 16 '13 at 22:26
@Sushanth-- What will be the order of execution of events – irfandar Oct 07 '16 at 09:37
@irfandar The order in which the events will be bound. – Sushanth -- Oct 07 '16 at 18:17

score 2 · Answer 2 · answered Jun 19 '13 at 23:29

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.

answered Jun 19 '13 at 23:29

faffaffaff

3,429
16
27

score 1 · Answer 3 · answered Jun 19 '13 at 23:32

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

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>

wow that's so efficient, and it worked perfectly... Much appreciated. I def have to read up on js more... — , Jun 19 '13 at 23:37

Can I have two jquery onclick events in one element?

3 Answers3

Linked