Question

I have a nested div like this

<div id="one">
    <div id="two">
        id two goes here
    </div>
    <div id="three">
           id three goes here
    </div>
    <div id="four">
          id four goes here
    </div>
</div>

Now i want to handle click and doubleclick events on all divs except in div#four,
like this

$('#one').live('dblclick', function() {
                    my javascript code goes here
                });
('#one').live('click', function() {
                    my javascript code goes here
                });

How can i use the above script and exclude the last nested div #four.

Thanks

Answer 1

EDIT: Based on further clarification, try this:

$('#one').bind('click dblclick', function( event ) {
    var id = event.target.id;
    if(id == "one" || id == "two" || id == "three") {
        if(event.type == "click") {
            // code for click event
        } else {
            // code for double click event
        }
    }
});​

---

EDIT: Based on our conversation under another answer, it seems like you want the #one element to be clickable, but none of its child elements. If that is right, try this:

$('#one').click(function() {
    // code to run when `one` is clicked.
}).children().click(function( event ) {
    event.stopPropagation();
});

Now if there’s any text in #one, the code for that element will fire, but it will not fire when you click any children of #one.

Let me know if that was what you wanted.

---

EDIT:

If you are saying that you will have a dynamic number of elements inside #one, and the last one will not get the event, then do this:

$('#one').delegate('div:not(:last-child)', 'click dblclick', function( event ) {
    if(event.type == 'click') {
        // do something for the click event
    } else {
        // do something for the double click event
    }
});​

Note that this assumes there will not be nested divs. Results may be unexpected if there are. Also, the #one element doesn’t fire events. Only its children.

---

Original answer:

$('#one,#two,#three').bind('click', function(){
  // code for click event
})
.bind('dblclick', function() {
   // code for double click event 
});

Or replace .bind with .live if you really need it.