jquery/jqueryui, click anywhere in div besides button

I have a div as a ui-widget-content with a h3 as a ui-widget-header. The header has three buttons. Each have the class "save开发者_如何学运维" "delete" and "cancel" respectivly. I want to have a .click function whene ever you click on the div, except if you actually click on one of the buttons.

I tried: $(".record").not(".save").not(".delete").not(".cancel").click(

my code is:

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

However the click function still activated when clicking the buttons.

Any ideas?

---

You can use the event.target to see what was clicked. Then rely on even bubbling and attach the click handler on the parent div. jsfiddle

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

---

Assuming that you have another event handler (or several) that handles the buttons, you can prevent the bubbling there with

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

---

Use e.stopPropagation() in the buttons' click handler(s):

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

Here's a demo: http://jsfiddle.net/Ender/2yERz/

And some documentation on e.stopPropagation(): http://www.quirksmode.org/js/events_order.html#link9