jQuery .click() not working?

2019-03-03 12:47发布

站内文章 / JavaScript
49 0 0

问题:

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?

回答1:

Try this:

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


回答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.



回答3:

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"));
});


回答4:

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



标签： javascript jquery click
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~