Question

以下代码非常有用，它可以创建表并附加行。

但是，我已将click事件附加到位于<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()事件绑定，因为项目会动态添加到DOM中，并且在初始绑定调用后不会附加到该项目。 e.g。

$('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不仅要绑定到页面上已经的元素，还要留意与您的选择器匹配的 future 元素。< / p>

更新

自jQuery v1.9起，.live()不再可用，之后被.on()取代。如果您使用的是jQuery＆gt; = 1.9，请使用以下代码：

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

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

Answer 2

尝试更改

$('input[id^=add-issue-]').click(function() { ... });

到

$('input[id^=add-issue-]').live("click",function() { ... });

如果它是竞争条件（例如，JavaScript试图在createNewSection（）函数完成之前分配单击处理程序），这将解决它。实时事件处理程序不仅在运行时捕获匹配的选择器，而且还在之后添加任何新的（例如，通过JS）。

jQuery - 创建动态表

2 个答案:

更新