jQuery - 创建动态表

Question

以下代码有效，它创建了表并附加了行。

但是，我已将单击事件附加到驻留在 <tfoot> 中的动态创建的按钮。但它不起作用。它似乎没有调用createNewIssue函数并且它不会生成任何 Firebug 错误。我将其更改为仅发出一个简单的警报，但这也不起作用。

我对 jquery 还很陌生，所以如果有更好的方法来做到这一点，那就太好了，但希望有人至少能够帮助我理解为什么我的 tfoot 按钮不起作用......

首先...

$(document).ready(function() {
  //add-section works
  $('#add-section').click(function() {
    createNewSection();
  });

  //this does not work      
  $('input[id^=add-issue-]').click(function() {
    alert($(this).attr('id')); //put this in and it fails

        //this is what I really want it to do:
        var issueid = $(this).attr('id');
        createNewIssue(issueid);
  });

});

这是createNewSection功能，有效:

function createNewSection() {
    var sectioncount = $('input.section-title').length;
    var issuecount = $('input.issue-title').length;
    var newsection = $('input#add-section-textfield').val();

    //Add section entry to table
    var sinput = document.createElement("input");
    sinput.setAttribute("type", "text");
    sinput.setAttribute("name", "section["+sectioncount+"][title]");
    sinput.setAttribute("id", "section-"+sectioncount+"-title");
    sinput.setAttribute("value", newsection);

    //Issue title input
    //Add section entry to table
    var iinput = document.createElement("input");
    iinput.setAttribute("type", "text");
    iinput.setAttribute("name", "add_issue_"+sectioncount);
    iinput.setAttribute("id", "add-issue-"+sectioncount);
    iinput.setAttribute("value", "");

    //Button to add issue entry to table
    var issuebutton = document.createElement("input");
    issuebutton.setAttribute("type", "button");
    issuebutton.setAttribute("name", "add_issue_"+sectioncount);
    issuebutton.setAttribute("id", "add-issue-"+sectioncount);
    issuebutton.setAttribute("value", "Add Issue");

    var sTable = $('<table>').attr('id', 'section-'+sectioncount).appendTo('#sections');
    var sTbody = $('<tbody>').appendTo(sTable);
    var sTrow = $('<tr>').appendTo(sTbody);
    var sTcell = $('<td>').attr('colspan', 2).html(sinput).appendTo(sTrow);
    var sTfoot = $('<tfoot>').appendTo(sTable);
    var sTfootRow = $('<tr>').appendTo(sTfoot);
    var sTfootCell = $('<td>').html(iinput).appendTo(sTfootRow);
    var sTfootCell2 = $('<td>').html(issuebutton).appendTo(sTfootRow);
}

最终，我尝试使用 createNewIssue 函数将一行(包含嵌套表)添加到 <table id="section-...> ，但现在，我只是想让它用父表的 id 发出警报...

function createNewIssue(issueid) {
    var sTable = $(id).parent().parent().attr('id');
    alert(sTable);
}

Answer 1

您可能想使用 jQuery 的 .live()事件绑定(bind)，因为项目动态添加到 DOM，并且在初始绑定(bind)调用后不会附加到。例如

$('input[id^=add-issue-]').live('click', function() {
  alert($(this).attr('id')); //put this in and it fails

  //this is what I really want it to do:
  var issueid = $(this).attr('id');
  createNewIssue(issueid);
});

.live() 告诉 jQuery 不仅要绑定(bind)到页面上已经的元素，还要留意 future 匹配的元素你的选择器也是如此。

更新

从 jQuery v1.9 开始，.live() 不再可用，已被 .on() 取代。 。如果您使用的是 jQuery >= 1.9，请改用以下内容:

$(document).on('click', 'input[id^="add-issue-"]', function(e){
  alert($(this).attr('id'));

  var issueId = $(this).attr('id');
  createNewIssue(issueId);
});