13

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.

3
  • 3
    Remove the inline event handler and bind them both with jQuery.
    – Matt Ball
    Jun 19, 2013 at 23:27
  • also add id='demo12' attribute, that jQuery can find the link
    – metadings
    Jun 19, 2013 at 23:30
  • Thanks, worked like a charm!
    – user2487746
    Jun 19, 2013 at 23:38

3 Answers 3

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

4
  • 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! Dec 15, 2013 at 13:20
  • @JeremyPridemore.. Glad to have helped :) Dec 16, 2013 at 22:26
  • @Sushanth-- What will be the order of execution of events
    – irfandar
    Oct 7, 2016 at 9:37
  • @irfandar The order in which the events will be bound. Oct 7, 2016 at 18:17
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.

1

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>
1
  • 1
    wow that's so efficient, and it worked perfectly... Much appreciated. I def have to read up on js more...
    – user2487746
    Jun 19, 2013 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.