jQuery .click() not working?

2019-03-03 12:39发布

站内问答 / JavaScript
654 4 6

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?

4条回答
老娘就宠你
2楼-- · 2019-03-03 13:04

Try this:

$(document).on('click', '.download', function(){ 
     // Your Code
});
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-03-03 13:12

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"));
});
查看更多
0人赞 添加讨论(0) 举报
混吃等死
4楼-- · 2019-03-03 13:22

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()">

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
5楼-- · 2019-03-03 13:24

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)