0

I have the following structure in my html:

<div class="parent">
    <div class="child"></div>
</div>

I also have two jQuery click() actions on each of my classes:

$('.parent').click(function() {
    //Methods Set 1
});

$('.child').click(function() {
    //Methods Set 2
});

Assume that the css is as simple as it need to be, just to be able to click the divs.

Now my question is the following: how is it possible to set the jQuery action in .child class to execute the Methods Set 2 BUT NOT to execute the Method Set 1 after?

What do I expect to see:

When user click the .parent class, then it will only execute the first set of methods that belongs in that action call.

When the user click the .child class, then it will only execute the second set of methods that belongs in that action call.

What happens with my code: when the user click the parent class, the first set method is called. [OK]

When the user click the .child class, first the Methods Set 2 is execute, then it calls the Set Method 1 and execute them. [FAIL]

What have I tried so far:

A not so simple question for me that kept me far from many ideas I had and forced me to change my plans so many times.

  1. I have tried to set .not() method in my .parent selector like this:

    $('.parent').not('.child').click(function() {
    //Methods Set 1
});

    But even if I don't get any errors in my console (I use firebug in Firefox for debugging logs) I don't get the expected result.

  2. I also tried the :not() Selector in my .parent class but also didn't get the results I expected.

    $('.parent:not(.child)').click(function() { /*Methods Set 1 */});
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • The accepted answer to this question should help: http://stackoverflow.com/questions/12077859/difference-between-this-and-event-target – Shaun Scovil Dec 31 '15 at 13:34
  • 1
    http://stackoverflow.com/questions/2457246/jquery-click-function-exclude-children – Gogol Dec 31 '15 at 13:34
  • @ShaunScovil I'm sorry not as I expected. –  Dec 31 '15 at 13:35
  • What I was getting at was the difference between event.target and currentTarget, which is better explained here: http://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget – Shaun Scovil Dec 31 '15 at 13:40
  • see my edited answer. sorry for mistake – lvil Dec 31 '15 at 13:45

2 Answers2

3

Use stopPropagation() function. see here

$('.parent').click(function() {
//Methods Set 1
});

$('.child').click(function(event) {
    event.stopPropagation();  
//Methods Set 2
});
lvil
  • 4,326
  • 9
  • 48
  • 76
  • oops. sorry, my mistake. copy+paste function name againg – lvil Dec 31 '15 at 13:43
  • I found the same way so I posted my own answer which came after yours as I didn't saw it from editing. I also add some explain. Sorry for that.... +1 –  Dec 31 '15 at 13:52
1

Ok after some help from noc2spam ツ who redirect me to that answer I found the way to do it.

What I actually wanted is stopPropagation() Event on .parent class. So my code will be as bellow:

$('.parent').click(function() {
    //Methods Set 1
}).children().click(function(e) {
    return false;
});

Clarification

From jQuery Api Page:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

So, as I use Event bubbling the event handler of .child will execute first and then comes the event handler of .parent, which is ignored as I use event.stopPropagation().

               / \
---------------| |-----------------
| parent       | |                |
|   -----------| |-----------     |
|   |child     | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------
Community
  • 1
  • 1