Appended element click function is not working as expected?

Question

I attach click event to appended element by $('body').on('click') . But if I click id one two times, it also alert two times when its appended element click.

If I attach like this $('body').off().on("click") , the last appended element click can alert only (if I click id one first and then click id two,then id one appended element click can't alert) .

How can I attach click event for every appended element to alert once ?

 $(document).ready(function(){ test.init(); }) var test = { init : function() { $("#one").on("click",function(){ test.appendOne(); }); $("#two").on("click",function(){ test.appendTwo(); }); }, appendOne: function() { $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body"); $('body').on("click",'.one-after',function() { alert("clickedOne"); }); }, appendTwo: function() { $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body"); $('body').on("click",'.two-after',function() { alert("clickedTwo"); }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">One</button> <button id="two">Two</button> 

Answer 1

You should use selector children() which is a selector on every first level children of the body element (see documentation reference at https://api.jquery.com/children/ )

So your code would become :

$('body').children().on("click")

Answer 2

with a slight modification, add the event directly to the appended object as below:

  $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body")    
        .on("click",function() {
          alert("clickedOne"); })

you can repeat this pattern for the other one

Answer 3

That happen since every time you click the button, you bind a new event on the body .

You already are using event delegation, you only have to bind the event once and every new element will have an event "attached" to it. Move your event binding inside your init :

 $(document).ready(function(){ test.init(); }) var test = { init : function() { $('body').on("click",'.one-after',function() { alert("clickedOne"); }).on("click",'.two-after',function() { alert("clickedTwo"); }); $("#one").on("click",function(){ test.appendOne(); }); $("#two").on("click",function(){ test.appendTwo(); }); }, appendOne: function() { $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body"); }, appendTwo: function() { $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">One</button> <button id="two">Two</button> 

Answer 4

You may simply change these two lines:

$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");    
$('body').on("click",'.one-after',function() {

to (chain appendTo with on. Remove the event delegation):

$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() {

Instead of creating a delegation click event handler on the body you can simply add the click event to each element.

 $(document).ready(function(){ test.init(); }) var test = { init : function() { $("#one").on("click",function(){ test.appendOne(); }); $("#two").on("click",function(){ test.appendTwo(); }); }, appendOne: function() { $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() { alert("clickedOne"); }); }, appendTwo: function() { $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body").on("click",function() { alert("clickedTwo"); }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">One</button> <button id="two">Two</button> 

Answer 5

You can use jQuery's .one() variant:

$("#one").one("click",function(){
  test.appendOne();
});

This will fire only once. http://api.jquery.com/one/