0

テーブル内に「新しい製品の追加」セクションがある注文フォームを作成しようとしています。基本的に、ユーザーは「行の追加」リンクをクリックできる必要があります。新しい入力行が表示され、ユーザーが別の製品を注文リストに追加できるようになります。私はこの作業を 1 回行うことができますが、その後、フォームは新しい行を追加しません。console.log を見ると、イベント ハンドラーが元のフォーム要素でのみ動作しており、新しい製品の入力行では動作していないことがわかります。私はここで作業しているものの短縮されたフィドルを持っています:

http://jsfiddle.net/scottm1164/eTBr6/5/

これが私のjQueryです：

<script>
 $(document).ready(function () {
    (function () {
        var start = $('table'),
            newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
        $('.addRow').on('click', function () {
            $(start).append(newRow);
            console.log(this);
        });

    })(); //end SIAF

}); //END document ready
</script>

ここに私のフォームがあります:

<form enctype="multipart/form-data" method="post" action="#" id="orderForm">
    <ul>
        <li>Name:
            <br>
            <input type="text" id="name" />
        </li>
        <li>Email:
            <br>
            <input type="email" id="email" />
        </li>
        <li>Company:
            <br>
            <input type="text" id="company" />
        </li>
        <li>Phone:
            <br>
            <input type="tel" id="phone" />
        </li>
        <li>Delivery Address:
            <br>
            <input type="text" id="delAddress" />
        </li>
        <li>PO Number:
            <br>
            <input type="text" id="poNum" />
        </li>
        <li>If you have a document for your order, attach it here:
            <br>
            <input type="file" id="docs" />
        </li>
        <li>
            <table id="prodTable" width="auto" border="0" cellpadding="4" cellspacing="4">
                <tbody>
                    <tr>
                        <td>Quantity</td>
                        <td>Product Number</td>
                        <td>Product Description</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" class="quantity" name="quantity_" />
                        </td>
                        <td>
                            <input type="text" class="prodNum" name="prodNum_" />
                        </td>
                        <td>
                            <textarea cols="15" rows="1" name="prodDesc_"></textarea>
                        </td>
                        <td>
                            <p class="addRow">Add a Row</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </li>
        <li>Special Delivery Instructions:
            <br>
            <textarea cols="30" rows="10" id="instructions"></textarea>
        </li>  
    </ul>
    <input type="submit" id="submit" />
</form>

誰かがこのコードの何が問題なのか説明してもらえますか?元の「行を追加」リンクのみで、新しく作成されたリンクではありません。

4

4 に答える 4

3

これを試して

http://jsfiddle.net/eTBr6/8/

$('form').on('click', '.addRow', function () {
    var start = $('table'),
        newRow = $('<tr><td><input type="text" class="quantity" /></td>' +
                   '<td><input type="text" class="prodNum" /></td>' +
                   '<td><textarea cols="15" rows="1"></textarea></td>' +
                   '<td><p class="addRow">Add a Row</p></td></tr>');
    $(start).append(newRow);
});

クリック ハンドラー内に変数を配置し、フォームをコンテキストとして使用してイベント委任も使用します。

于 2013-10-17T19:03:50.253 に答える
1

ワーキングデモ

これが必要だと思います。通常のイベントはページの読み込み時にのみ機能するため、動的に読み込まれる要素の $(document).on() 場合、通常の function() よりもデリゲートが必要です。

ここにコードがあります

$(document).ready(function () {

    var start = $('table'),
        newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';


    $(document).on('click', '.addRow', function () {
        $(start).append(newRow);
    });
}); //end document.ready

これが役に立てば幸いです、ありがとう

于 2013-10-17T19:15:08.757 に答える
0

私はジョナサンと似たようなことをしましたが、それほど速くはありませんでした。

ここでフィドル: http://jsfiddle.net/xCNqP/1/

(function () {

        var start = $('table'),
            newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><input type="text" maxlength="15"/></td><td><p class="addRow">Add a Row</p></td></tr>';


        $(document).on('click', '.addRow', function () {
            $(start).append($(newRow));
        });

    })(); //end SIAF

私が使用した主な変更はnewRow、要素を宣言すると一度だけ追加できるため、単なる文字列に設定されました。再宣言 (ジョナサンがハンドラー内で宣言を移動することによって行った) は、再追加す​​る必要があります。

新しい要素にアタッチするための正しい使い方onも含まれていました。

于 2013-10-17T19:09:53.753 に答える