3

各行がフォームに対応するテーブルがあります。マークアップが無効である間 (<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 の 2 番目のセルに合わせて開始されますが、送信とは関係ないと思います。)

4

1 に答える 1

4

試す

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

それ以外の

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

しかし、無効なマークアップを避け、次のいずれかを行うことをお勧めします。

  1. レイアウトにテーブルを使用しない
  2. 要素を使用しないform- jQuery を使用して行をシリアル化し、オンデマンドで送信します
于 2012-08-18T17:49:56.107 に答える