0

フォームの行を複製し、各フォーム フィールドの ID の末尾に増分番号を追加する方法を見つけました。そのため、ID の末尾に付加された増分番号を使用すると、変更イベントで 1 つの ID の値を別の ID にコピーするのは簡単だと思いましたが、これは複製された行では機能しません!

これを使用して新しいフォーム行を作成しています:

$('#btnRemove').attr('disabled','disabled');
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                                newElem.children('.product').attr('id', 'product' + newNum).attr('name', 'product' + newNum);
                newElem.children('.productid').attr('id', 'productid' + newNum).attr('name', 'productid' + newNum);

                $('#input' + num).after(newElem);
                $('#btnRemove').removeAttr('disabled','disabled');

                if (newNum == 7)
                $('#btnAdd').attr('disabled','disabled');


            });

            $('#btnRemove').on('click', function() {
                $('.clonedInput').last().remove();
                $('#btnAdd').removeAttr('disabled','disabled');
            });

そして、このコードを使用して、シリアル化された製品 ID.val(value.split('-')[3])を製品選択値からフォームの「id」フィールドにコピーしようとしています。ただし、最初のものでのみ機能し、「複製された」フォームフィールドでは機能しません。

 $("#product").on('change keyup', function() {
        var value = $('option:selected', this).val();
            $("#productid").val(value.split('-')[3]);
        }).keyup();
        $("#product2").on('change keyup', function() {
        var value = $('option:selected', this).val();
            $("#productid2").val(value.split('-')[3]);
        }).keyup();
        $("#product3").on('change keyup', function() {
        var value = $('option:selected', this).val();
            $("#productid3").val(value.split('-')[3]);
        }).keyup();
        $("#product4").on('change keyup', function() {
        var value = $('option:selected', this).val();
            $("#productid4").val(value.split('-')[3]);
        }).keyup();
        $("#product5").on('change keyup', function() {
        var value = $('option:selected', this).val();
            $("#productid5").val(value.split('-')[3]);
        }).keyup();
        $("#product6").on('change keyup', function() {
        var value = $('option:selected', this).val();
            $("#productid6").val(value.split('-')[3]);
        }).keyup();​

これをjsfiddleに置いたので、私の問題が何であるかを簡単に確認できます:デモ

4

1 に答える 1

3

クローンを使用して作成selectし、DOMに動的に追加するため、それらのデリゲートイベントハンドラーが必要です

// delegate event handler
$('#myForm').on('change keyup', 'select[id^=product]', function() {
    var value = $('option:selected', this).val();
    $(this).next('input.productid').val(value.split('-')[3]);
}).keyup();

デモ

于 2012-06-15T16:08:14.577 に答える