Add button handler for a button that is generated dynamically

Question

I have the following javascript code:

$(document).ready (function()
{ 
    setInterval("RepeatedlyCallUpdate()",10000);
    // Other code
    $('#btnRefresh').click(function(e){
        e.preventDefault();
        alert ("Test");
    }); 
    // Other code

}); 

function RepeatedlyCallUpdate() { 
  $.ajax({
   url: "/getdled.php",
   data: "user=success",
   success: function(msg){
     console.log(msg);
     var oldhtml=$("#Downloaded").html();
     if ( msg !== oldhtml ) {
        $("#Downloaded").html(msg);
     }       

   }
 });
}

The html code for #Downloaded:

<div id="Downloaded"><h3 style="padding-left:20px;">Downloaded files</h3>
</div>

At runtime, the #Downloaded div block is populated with html code so that it becomes this:

<div id="Downloaded"><h3 style="padding-left:20px;">Downloaded files</h3>
<ul class="nav nav-pills">
<li>
<button style="margin-left: 15px;" class="btn btn-primary refreshbtn" type="button" id="btnRefresh">
Refresh
</button>
</li>
</ul><div>
<div class="row">
    <div style="margin-left: 15px;" class="col-md-4">
    <a href="somthing">Some link</a></div>
    <div class="col-md-1">314M</div>
    </div>
</div>
</div>

The issue is that my #Downloaded button click event does not fire. What am I missing?

Answer 1

You can use event delegation

$("#Downloaded").on('click', '#btnRefresh', function(){
    alert("lol");
});