Question

在我的html中，我有以下ajax代码将数据填充到表中：

function generate_table() {

      var tr;
      $('#emp_body').html('');
      for (var i = 0; i < displayRecords.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + displayRecords[i].id + "</td>");
        tr.append("<td>" + displayRecords[i].email_address + "</td>");
        tr.append("<td>" + displayRecords[i].mobile_number + "</td>");
        tr.append("<td>" + displayRecords[i].status + "</td>");
        tr.append("<td>" + displayRecords[i].credit_limit + "</td>");
        var $td = $('<td>').html('<a href="#" class="btn btn-info btn-md editbtn">Edit</a>');
        tr.append($td);
        $('#emp_body').append(tr);
      }
    }

我还有一个关于点击功能的jQuery

jQuery('.editbtn').on('click', function() {

      var $row = jQuery(this).closest('tr');
      var $columns = $row.find('td');
      var values = [];

      jQuery.each($columns, function(i, item) {
          values.push(item.innerHTML)
      });
      console.log(values[0]);
      window.location.href = "/portal/admin/customerDetails?id=" + values[0];

    });

所以这里的问题是，当我单击“编辑”按钮时，它没有调用“单击”功能。如何解决此问题？

Answer 1

您的内容会动态添加到dom中。因此，当您添加click事件处理程序时，尚不存在，因此该处理程序从未附加到按钮上。您可以使用此代码。

jQuery('#emp_body').on('click', '.editbtn', function(){});

来自jQuery文档：

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中的元素的集合。从jQuery 1.7开始，.on（）方法提供附加事件处理程序所需的所有功能。对于从旧版jQuery事件方法转换的帮助，请参见.bind（）， .delegate（）和.live（）。要删除与.on（）绑定的事件，请参见 .off（）。附加仅运行一次然后删除的事件本身，请参阅.one（）

如何在点击时调用Jquery按钮？

1 个答案: