title: How to prevent javascript bubbling
body: <p>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. </p>
  
  <p>Each of the newly created div also dynamically creates a button, clicking which I want to get alert('something')</p>
  
  <p><strong>Problem</strong> 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 <strong>only once</strong>. But I am facing Javascript bubbling*</p>
  
  <p>My Javascript and HTML codes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#btn11").click(function(){
      var nw="&lt;div class='product_input'&gt;&lt;input type='text'/&gt;&lt;br/&gt;";
      nw+="&lt;button type='button' class='btn12'&gt;Add category&lt;/button&gt;";
      nw+="&lt;/div&gt;";
      $("#apnd1").append(nw);
  
      $(".btn12").click(function(){
        alert("jhfj");
      });
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="apnd1"&gt;&lt;/div&gt;
  &lt;button type="button" id="btn11"&gt;Add product&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to get rid of this?</p>