jQuery making selection

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

Like this:

$('#one, #one > div').not('#four').delegate('dblclick, click', function(){
  // my javascript code goes here
});

Answer 2

Use not method, more on this here: http://stackoverflow.com/questions/1002319/how-can-i-exclude-these-elements-from-a-jquery-selection

Answer 3

You must use $('#one') instead $('.one') aren't you?

Answer 4

I would use an additional class:

HTML:

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

JS:

('.clickable').live('click', function() {

});

Answer 5

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.

Answer 6

$("div:not(#four)")

or

$("#one :not(#four)")

Will select any div that does not have the id="four" set. Basically the :not is what you are looking for. Anything in the :not parenthesis is negated for selection purposes.

http://api.jquery.com/not-selector/

An alternative is to attach a single click/double click handler to the parent which means no need for .live or anything, and in the handler ensure that you are receiving a click from an acceptable child with $(event.target).is(":not(#id)")

$("#one").click(function(event) {
    if (this != event.target && $(event.target).is(':not(#four)')) {
       // do work on event.target
    }
});
// ...