Question

in my jquery web application, i need to manage several kinds of button. All buttons have ui-button css’class, and a specific css class for spefic button’s action, for example

<div class="ui-button">
    Google
</div>
<div class="ui-button ui-button-search">
    Search
</div>
<div class="ui-button ui-button-submit">
    Submit
</div>
<div class="ui-button ui-button-action1">
    Action1
</div>
<div class="ui-button ui-button-action2">
    Action2
</div>

So, i need to attach jquery handler to manage button’s action. For example,

• if user clicks on div.ui-button without other css classes, browser goes to http://www.google.it
• if user clicks on div.ui-button.ui-search, browser opens a dialog for text input
• if user clicks on div.ui-button.ui-submit, browser submits button’s parent form
• if user clicks on div.ui-button.ui-actionX, browser performs actionX.

So, can you give me an idea on how to attach events to buttons without conflicts?

Thank you.

Answer 1

The best would be to add ui-button-google, then you can cleanly bind to all buttons individually.

jQuery 1.7 introduces on/off so all you need to do is target each one:

$('.TARGET-CLASS').on('click', function() {})

If you don’t add the class to the Google button, you can alternatively bind to the general UI button and do a check for classes present on the button.

$('.ui-button').on('click', function(){
  if $(this).hasClass('ui-button-search'){
    //search 
  }
  else if $(this).hasClass('ui-button-submit') {
    //submit
  }
...
  else {
    //google
  });