Я генерирую набор кнопок в HTML-таблице следующим образом, а затем я хочу вызвать функцию, когда она щелкнет.

$.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>'; 

}) 

Вот как я вызываю функцию, но она не работает.

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

Где не так в коде выше?

5
Bandara 6 Янв 2017 в 07:47

4 ответа

Лучший ответ

Попробуй это:

$(document).on('click', '.download', function(){ 
     // Your Code
});
8
Sahadev 6 Янв 2017 в 04:50

Делегируйте событие статическому родителю:

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

Здесь div может быть статическим родителем, который был доступен, когда страница была загружена при первой загрузке. Хотя document или body также можно использовать вместо div.


Так как вы не представили, как вы создаете div элемент, но следует заметить, что вы генерируете недопустимую разметку. Поскольку элемент td не может быть дочерним по отношению к div, но table 'tr.

1
Jai 6 Янв 2017 в 04:57

Вы хотите это таким образом? Я дал код для добавления всей таблицы. Проверьте это

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
Ramya Roy 6 Янв 2017 в 05:22

Вам необходимо использовать делегирование событий.

Если ваша таблица имеет идентификатор «button-table», вы можете создать обработчик событий следующим образом:

$("#button-table").on("click",function(e){
    var target = e.target;
    console.log($(target).attr("data-id"));
});
0
user2182349 6 Янв 2017 в 04:50