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