jQuery .click() not working?

Question

I generate the set of buttons within html table as follows and then I want to call to function when it click.

$.each(childData, function(key, item) {
    var packPath = key.replace(/_/g, "/"); //Replace underscore with slash

    div.innerHTML = div.innerHTML + '<td>'+key+'</td>'
                + '<td><button type="button" data-id="'+key+'" class="download btn btn-success btn-xs">Originals</li></td></div>'; 

}) 

This is how I call the function but it's not working.

$(".download").click(function(){
    alert();
});

Where is the wrong in above code?

Answer 1

Try this:

$(document).on('click', '.download', function(){ 
     // Your Code
});

Answer 2

Delegate the event to static parent:

$(div).on("click", ".download", function(){  

Here div can be the static parent which was available when page was loaded at first load. Although document or body can also be used in place of div.

---

As you have not presented how you create div element but one thing has to be noticed that you are generating an invalid markup. As a td element can't be a child of div but table's tr.