How to prevent javascript bubbling

Question

I am talking about Jquery. Say, I have a button, I clicked it and a new div is dynamically created. I clicked again and another div is created. This way I created 3 div.

Each of the newly created div also dynamically creates a button, clicking which I want to get alert('something')

Problem is that, when I click button of 1st div(newly created div) I get the alert 3 times, When I click button of 2nd div(newly created div), I get alert 2 times. For every one click I want to get alert only once. But I am facing Javascript bubbling*

My Javascript and HTML codes:

$("#btn11").click(function(){
    var nw="<div class='product_input'><input type='text'/><br/>";
    nw+="<button type='button' class='btn12'>Add category</button>";
    nw+="</div>";
    $("#apnd1").append(nw);

    $(".btn12").click(function(){
      alert("jhfj");
    });
  });

<div id="apnd1"></div>
<button type="button" id="btn11">Add product</button>

How to get rid of this?

possible duplicate of [restrict event propagation in javascript](http://stackoverflow.com/questions/5779319/restrict-event-propagation-in-javascript) — David, Jun 05 '15 at 09:33
@David, I searched similar problems, but didnt get, so asked — partho, Jun 05 '15 at 09:35

score 4 · Accepted Answer · answered Jun 05 '15 at 09:33

Dont bind the events inside another evens. You can bind it outside. Since it is dynamically created, you need to use delegate to bind the events. Then you will not get multiple alerts

$("#btn11").click(function() {
    var nw = "<div class='product_input'><input type='text'/><br/>";
    nw += "<button type='button' class='btn12'>Add category</button>";
    nw += "</div>";
    $("#apnd1").append(nw);
});
$("#apnd1").on("click", ".btn12", function() {
    alert("jhfj");
});

Fiddle

voted up for having read the question and having defined a proper selector ("#apnd1"). — Denys Séguret, Jun 05 '15 at 09:37

score 1 · Answer 2 · answered Jun 05 '15 at 09:45

Use event delegation for the same, Demo

$(document).ready(function(){
        $("#btn11").click(function(){
            var nw="<div class='product_input'><input type='text'/><br/>";
            nw+="<button type='button' class='btn12'>Add category</button>";
            nw+="</div>";
            $("#apnd1").append(nw);            
        });
    $(document).on('click', ".btn12", function(){
                alert("jhfj");
            });
});

How to prevent javascript bubbling

2 Answers2