OnClick propagation when generating divs with jQuery

Question

I am not sure why the event StopPropagation technique is not working with this simple onClick example - the event seems to be bubbling up the DOM tree and is also iterating exponentially every time I click again.

I think this is because I generate html with a javascript function, and I'd be very eager to hear why you think this isn't working as expected.

EDIT: I have created a jsFiddle at http://jsfiddle.net/Guill84/GsLtN/22/. The issue becomes very clear. If I click on 'Text1' the first time, the alert pop-up comes up only once. If I click it again, it then comes up twice. If I click it again, it comes up three times, and so on. How can I amend the script so that it is run only once? This is driving me barmy.

HTML

<body>
    <div id='container'>
        <div id='1'>Text1</div>
        <div id='2'>Text2</div>
    </div>
</body>

Javascript

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);


$('body').on('click', '#1', function (event) {
    event.stopPropagation();
    var declim = 10 - 1;
    notice_it(declim);
});

$('body').on('click', '#2', function (event) {
    event.stopPropagation();
    var declim = 10 + 1;
    notice_it(declim);
});


$('body').on('click', 'body', function (e) {
    e.stopPropagation();
});

});

There's an extra `});` at the end - did you copy+paste only half the code? ie are the `.on` calls inside another function which gets called multiple times. — freedomn-m, Sep 29 '15 at 11:34
@freedomn-m, I did rollback it as I was not aware of your edit.. — Rayon, Sep 29 '15 at 11:38
Hello! Thank you for your answers. I have edited my question and created a jsFiddle to show you exactly the problem that I have. — Noobster, Sep 29 '15 at 12:14
@Noobster you are initializing events in **notice_it()** and calling itself on click events. Due to this, you are binding multiple events to same element. Following is the [Updated JSFiddle](http://jsfiddle.net/GsLtN/23/) — Rajesh, Sep 29 '15 at 12:34

score 1 · Answer 1 · answered Sep 29 '15 at 11:34

1

Calling return false should work in your scenario.

answered Sep 29 '15 at 11:34

AshishJindal

176
2
10

Hello -thank you for getting back to me. Unfortunately that did not work. I added a jsfiddle so you can now see the problem more clearly. – Noobster Sep 29 '15 at 12:15

score 1 · Accepted Answer · edited May 23 '17 at 11:45

I have already added comment but then I thought this would explain in a better way.

Issue

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);

    $('body').on('click', '#1', function (event) {
        event.stopPropagation();
        var declim = 10 - 1;
        notice_it(declim); // Issue
    });
});

Here notice_it() is used to initialize events and it is called again in event handlers. Following is an updated JSFiddle - Issues showing different registered events.

Solution

A simple solution would be to migrate the code used to notify to a separate function, as done in following JSFiddle - Solution1.

A better way to implement though would be like this: JSFiddle - Solution2. It is somewhat Declarative Programming and makes it very easy for another person to understand.

score 1 · Answer 3 · answered Sep 29 '15 at 13:32

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);


$('body').on('click', '#1', function (event) {
    return false;
    var declim = 10 - 1;
    notice_it(declim);
});

$('body').on('click', '#2', function (event) {
    return false;
    var declim = 10 + 1;
    notice_it(declim);
});


$('body').on('click', 'body', function (e) {
    e.stopPropagation();
});

});

Try to return false on click

OnClick propagation when generating divs with jQuery

3 Answers3

Issue

Solution