Question

我有一个表，每行对应一个表单。虽然标记无效（<form>标签立即出现在<tr>之后），但提交按钮按预期工作（即他们提交其包含的表单）。到目前为止，非常好。

现在我准备一个新行来附加到上面提到的表中。它隐藏在一个单独的表中。按下“添加一年”按钮后，我会使用表单克隆tr并将其附加到表格中。但令人惊讶的是：新创建的提交按钮不会提交。（我在没有克隆的情况下尝试了同样的方法，没有任何区别。）

以下是代码段（包含在JSFiddle中）：

HTML

<div id="min" style="display:none">2010</div>

<div id="div_newyr" style="display:none">
<table>
    <tr>
<form action="" method="post" name="form1" id="form1">
        <td class="td_yr">
            <span></span>
            <input type="hidden" name="yr" value="" />
        </td>
        <td><input type="submit" name="sub_close" value="Close" /></td>
</form>
    </tr>
</table>
</div>

<table>
<tbody id="tb_yrs">
    <tr>
<form action="" method="post" name="form2" id="form2">
        <td class="td_yr last">
            <span>2010</span>
            <input type="hidden" name="yr" value="2010" />
        </td>
        <td><input type="submit" name="sub_close" value="Close" /></td>
</form>
    </tr>

</tbody>
<tbody>    
    <tr>
        <td><input type="button" id="but_newyr" value="Add a year" /></td>
    </tr>
</tbody>
</table>

JS

jQuery(document).ready(function() {
    $('#but_newyr').click(function() {
        var firstYear = parseInt($('div#min').html());
        firstYear--;
        newRow = $('#div_newyr').find('tr').clone(true);
        newRow.find('td.td_yr').children('span').html(firstYear).next('input').val(firstYear);

        $('#tb_yrs').append(newRow);
        $('div#min').html(firstYear);
    });
});

//added on a tip from a deleted answer
$(document).on('click', "input[type=submit]" ,function(){
    $(this).closest('form').submit();
});

如果为了在克隆之前检查它是否有效，我可以看待被克隆的表格，我可以提交该表格。所以，问题是：原始和附加/克隆表单或提交按钮之间有什么区别？

（只是旁注：附加行开始与Chrome下的第二个单元格一致 - 但我认为它与提交无关。）

Answer 1

尝试

$(this).closest('tr').find('form').submit();

而不是

$(this).closest('form').submit();

但更好的方法是避免无效标记，并且：

不要使用表格进行布局
不要使用form元素 - 使用jQuery serialize并按需提交行

克隆表格无法提交

HTML

JS

1 个答案: