jquery/jqueryui, cliquez n'importe où dans div en dehors du bouton

Question

J'ai une div comme ui-widget-content avec un h3 comme un ui-widget-header. L'en-tête a trois boutons. Chacun a la classe "save" "delete" et "cancel" respectivement. Je veux avoir une fonction .click quand vous cliquez sur la div, sauf si vous cliquez sur l'un des boutons.

J'ai essayé: $(".record").not(".save").not(".delete").not(".cancel").click(

mon code est:

<div class="record cursorPointer hoverClass ui-widget-content"> 
    <h3 class="ui-widget-header"> 
     <table width="100%"><tr> 
      <td align="left" style="width:33%; color:Red">somecontractorone</td> 
      <td style="width:33%" align="center"> Name: Joe Q Shmoe </td> 
      <td style="width:33%" align="right"> Buisness: joeqshmoeelectrical</td> 
      <td><button style="width:20px;height:20px" class="save"></button></td> 
      <td><button style="width:20px;height:20px" class="delete"></button></td> 
      <td><button style="width:20px;height:20px" class="cancel"></button></td></tr> 
     </table> 
    </h3> 
</div> 

Cependant, la fonction de clic toujours activé lorsque vous cliquez sur les boutons.

Des idées?

Answer 1

Vous pouvez utiliser le event.target pour voir ce qui a été cliqué. Ensuite, comptez même bouillonner et attacher le gestionnaire de clic sur le parent div. jsfiddle

$('.record').click(function(e){ 
    if($(e.target).is(':button')) 
     alert('button'); 
    else 
     alert('not button'); 
}); 

Answer 2

En supposant que vous avez un autre gestionnaire d'événements (ou plusieurs) qui gère les boutons, vous pouvez empêcher la bouillonnante là avec

$('button').click(function(e) { 
    e.stopPropagation(); 
    switch(this.className) { 
     // Or whatever... 
    } 
}) 

Answer 3

Utilisez e.stopPropagation() dans les boutons cliquez sur Gestionnaire (s):

$('button').click(function(e) { 
    e.stopPropagation(); 
    alert('you clicked a button!'); 
}); 

Voici une démo: http://jsfiddle.net/Ender/2yERz/

Et la documentation sur e.stopPropagation(): http://www.quirksmode.org/js/events_order.html#link9