Question

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?

Answer 1

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');
});