1

私はフォームを持っていて、jQuery Table AddRow プラグインを使用してテーブルに行を動的に追加しています。問題は、メニュー項目を選択すると、メニュー項目がその左側のテキスト ボックスに入るということです。 . 最初の行で機能しますが、プラグインを介して追加された行で機能させる方法がわかりません。

ここで私のコードの動作を確認できます: http://jsfiddle.net/VXNzd/

jQueryコードは次のとおりです。

// This moves the select box text to the input box
$('#mnu_names').change(function() {
    var mnuProduct = $("#mnu_names").find(':selected').text();
    var mnuCleanProduct = mnuProduct.split(' - ');
    $('#topping_name').attr('value', mnuCleanProduct[0]);
});
// This code is needed to add and delete rows with the plugin
$(".toppings_add").btnAddRow({

一番上のjsfiddleリンクにアクセスすると、私が話していることを簡単に確認できる場合があります。ロード時に選択ボックスを使用して何かを選択すると、価格情報なしでその情報がテキスト ボックスに表示されます。新しい行を追加して、もう一度試してください。うまくいかない、うまくいく方法がわからない。

4

1 に答える 1

2

問題は tomhallam が言ったように、あなたの ID は一意ではありませんでした。また$.change()、それを実行した後に追加されたブロックでは機能しません。代わりに を使用する必要があります$.on('change',...)。

コードを更新してhttp://jsfiddle.net/PDPbn/5/に投稿しました。

変更された jquery コードは次のようになります。

$(document).on('change','.mnu_names',function() {
    var mnuProduct = $(this).find(':selected').text();
    var mnuCleanProduct = mnuProduct.split(' - ');
    $(this).parentsUntil('tbody').find('.topping_name').attr('value', mnuCleanProduct[0]);
});
于 2012-04-30T15:02:32.810 に答える