jquery/jqueryui, klicken Sie irgendwo in div neben der Schaltfläche

Question

Ich habe eine div als UI-Widget-Inhalt mit einem h3 als UI-Widget-Header. Die Kopfzeile hat drei Schaltflächen. Jeder hat die Klasse "Speichern" "Löschen" bzw. "Abbrechen". Ich möchte eine .click Funktion haben, wenn Sie auf das div klicken, außer wenn Sie tatsächlich auf einen der Knöpfe klicken.

Ich habe versucht: $(".record").not(".save").not(".delete").not(".cancel").click(

mein Code:

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

jedoch die Klick-Funktion noch aktiviert, wenn die Tasten klicken.

Irgendwelche Ideen?

Answer 1

Sie können die event.target verwenden, um zu sehen, was angeklickt wurde. Dann verlassen Sie sich auf gleichmäßige Bubbling und hängen Sie den Click-Handler auf das übergeordnete div. jsfiddle

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

Answer 2

Unter der Annahme, dass Sie einen anderen Event-Handler (oder mehrere), die die Tasten Griffe, können Sie die sprudelnden dort mit

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

Answer 3

Verwenden e.stopPropagation() in den Tasten Klick-Handler (s) verhindern:

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

Hier ist eine Demo: http://jsfiddle.net/Ender/2yERz/

Und einige Dokumentation auf e.stopPropagation(): http://www.quirksmode.org/js/events_order.html#link9