click function does not work on dynamically created element

Question

can anyone explain why this code works:

$(document).ready(function(){
$("#file").on('change',function(){
$("#selected_files_div").append("<input type='button' class='red_button'>");
$(".red_button").on('click', function(){
// do something
});
});
});

but this one does not work?

    $(document).ready(function(){
    $("#file").on('change',function(){
  $("#selected_files_div").append("<input type='button' class='red_button'>");
    });
    $(".red_button").on('click', function(){
    // do something
    });
    });

Appending always works but click event works only in first.. case

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

1

Try binding click event on parent with Event Delegation:

$("body").on('click',".red_button", function(){
   // do something
});

Read more here What is DOM Event delegation?

edited May 23 '17 at 11:58

Community

1
1

answered Aug 31 '15 at 09:42

Manwal

23,450
12
63
93

Thank you for reply , it works... You learn something new everyday,, – aghtczst Aug 31 '15 at 09:58

click function does not work on dynamically created element

1 Answers1