jQuery .click() not working?

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?

Try this:

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

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.

You need to use event delegation.

If your table has an id of "button-table", you can create an event handler like so:

$("#button-table").on("click",function(e){
    var target = e.target;
    console.log($(target).attr("data-id"));
});

Do you want it this way? I have given code for adding an entire table.Check this out

function generate_table() {
  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];
 
  // creates a <table> element and a <tbody> element
  var tbl     = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  // creating all cells
  for (var i = 0; i < 2; i++) {
    // creates a table row
    var row = document.createElement("tr");
 
    for (var j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      var cell = document.createElement("td");
      var cellText = document.createTextNode("cell in row "+i+", column "+j);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }
 
    // add the row to the end of the table body
    tblBody.appendChild(row);
  }
 
  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute("border", "2");
}

<input type="button" value="Generate a table." onclick="generate_table()">

来源：https://stackoverflow.com/questions/41499098/jquery-click-not-working

标签

javascript

jquery

click