jQuery click() on div fires parents click() event

Question

    <div class="parent">
        <div class="child">
        </div>
    </div>
    <script type="text/javascript">
    $(document).on("click", ".parent", function(event){
        doAjaxCall();
    });

    $(document).on("click", ".child", function(event){
        doSomething(); // and DON'T call doAjaxCall();
    });
</script>

event.stopPropagation(); and return false; is also not working. What could be the problem?

Edit: okay, obvious it is working on js fiddle: http://jsfiddle.net/Smbb4/ I got to check my code once again..

Edit2: Solution:

    $('.parent').click(function(event) {

        if ( $(event.target).closest('.child').length > 0 ) {
            var close = $(event.target).closest('.child');
            var windowID = close.data('windowid');

            closeWindow(windowID);
            return false;
        }
        });

Last month I had a strange issue with a synchronous AJAX calls, preventDefault()/stopPropagation() and Firefox. It seemed that when using a synchronous AJAX call in a keydown handler under Firefox, the default behaviour was always propagated anyway. More info here : http://stackoverflow.com/questions/13360035/synchronous-ajax-request-focus-wrong-element-in-firefox Is this your usecase? — koopajah, Dec 02 '12 at 09:58

score 4 · Accepted Answer · answered Dec 02 '12 at 10:20

4

You only need one click handler, for the parent. Handle the event the regular way, unless the original target was within the child, in which case you branch and do something different.

$(document).on("click", ".parent", function(event){

    if ( $(event.target).closest('.child').length > 0 ) {
        doSomething;
        return false;
    }

    doAjaxCall();
});

answered Dec 02 '12 at 10:20

nbrooks

18,126
5
54
66

@DesertP No problem, glad it's still useful! – nbrooks Sep 03 '13 at 20:53

score 1 · Answer 2 · edited Dec 02 '12 at 09:58

1

Try this way

$(".parent").click(function() {

});

$(".child").click(function() {

});

It should work ok. It is not necessary to put them in the document.ready function

edited Dec 02 '12 at 09:58

John Dvorak

26,799
13
69
83

answered Dec 02 '12 at 09:57

Demian Flavius

785
1
10
17

in my case it is, cause i'm adding these divs on runtime. .click().. works, but I can't use it. There must be a problem with .on and stopPropagation() – Chris Dec 02 '12 at 10:00
Is you code working when you remove the AJAX part? If so check my comment to your question – koopajah Dec 02 '12 at 10:04
`It is not necessary to put them in the document.ready function` if the method executes before the target element is in the DOM it would not bind the event. To prevent that risk, binding when the DOM is ready is preferred. – Nope Dec 02 '12 at 17:52

score -1 · Answer 3 · edited May 23 '17 at 12:15

-1

Found the problem:

Since you are using on on the body element and not directly on img.theater the event is going to bubble up to body element and that is how it works.

In the course of event bubbling .theater-wrapper elements click event will be triggered so you are seeing it.

jQuery on() stopPropagation not working?

Solution:

$('.parentParent').on("click", ".child", function(event){});

edited May 23 '17 at 12:15

Community

1
1

answered Dec 02 '12 at 10:15

Chris

4,255
7
42
83

`Since you are using on on the body element and not directly on img.theater the event is going to bubble up to body element and that is how it works.` This is not true in your scenario. [This fiddle](http://jsfiddle.net/8hZTv/) works as expected, replace `document` with `body` in it and it still works. The event bubbling problem you are describing used to be the case for when using `live()` **not** `on()`. `live()` used to always let everything bubble up to the `document` thus `stopPropagation()` was not working. `on()` works as expected. – Nope Dec 02 '12 at 17:20
and this: `$('.parentParent').on("click", ".child", function(event){});` is exactly the same as this: `$(document).on("click", ".child", function(event){}` which is what you had. Binding to the document instead of a closest static element is not all of a sudden prevent `stopPropagation()` or `return false` from working in the `.child` element when using `on()`. – Nope Dec 02 '12 at 17:28

jQuery click() on div fires parents click() event

3 Answers3