jQuery Listener Excluding Child

I have a dl list of dd items. Each dd item has a listener attached to it (see below) so if it is clicked on I can rebuild the page and change some stuff. Each of these dd items also have a checkbox within them though which I would like to be excluded from that listener (so it can be picked up by another listener).

The problem that is occuring is whenever I click anywhere in the dd it will apply the dd listener, not the checkbox listener even if I clicked on the checkbox. Is there a way to distinguish what exactly was clicked without setting up divs inside the dd and applying listeners individually?

Example HTML Code:

<dl>
  <dd class="class1 class2 class3">Some text and stuff 
    <input type="checkbox" class="class1 checkBox">
  </dd>
</dl>

Example jQuery Code:

$("class1.checkbox").live("click", function() {
  //Do some other, completely different, cool stuff
  //console.log($(this).parent().开发者_JAVA百科attr("id"));
  console.log("test");
});

$("dd.class1.class2").live("click", function () {
  //Do some cool stuff
});

You need to stop the event bubbling.

$(".class1:checkbox").click(function(e) {
    alert('clicked checkbox');
    e.stopPropagation();
});

$("dd.class1.class2").click(function () {
    alert('clicked dd');
});

http://api.jquery.com/event.stopPropagation/

The concept of "bubbling up" is like if you have a child element with a click event and you don't want it to trigger the click event of the parent. You could use event.stopPropagation().

event.stopPropagation() basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.

Event Capturing:

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Event Bubbling:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

If you are using live() or delegate() you will need to return false;, though it may not work. Read the quote below.

Per JQuery docs:

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

A good resource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

$(":checkbox").live("click", function(e) {
        e.stopPropagation();
  //Do some other, completely different, cool stuff
  //console.log($(this).parent().attr("id"));
  alert("test");
});

$("dd.class1.class2").live("click", function (e) {
    e.stopPropagation();
  //Do some cool stuff
    alert("test2");
});

http://jsfiddle.net/PsaHQ/4/

Ok, you've got a bunch of little problems adding up to a big one here.

Your first selector has 2 issues in it. Look at the updated selector below (and notice the capitalization):

$(".class1.checkBox").live("click", function() {
  //Do some other, completely different, cool stuff
  console.log("test");
  return false; //added.
});

If you want to stop the event from bubbling to the next jquery listener, just return false.

Just bind the click event to the dd and check the target delegate appropriately

  $("dd.class1.class2").live("click", function (event) {
        if($(event.target).is(":checkbox"))
        {
            console.log("put checkbox func here");
        }else{
           console.log("put div func here");
        }
    });

Working Example: http://jsfiddle.net/QWLpd/1/