克隆字段的jQuery onchange事件

问题描述

我想出了如何克隆我的表单行，并为每个表单字段在ID的末尾附加一个递增编号.因此，我认为在ID末尾附加一个激进数字，然后在更改事件上使用它就很容易将一个ID的值复制到另一个ID，但这不适用于克隆的行！

I figured out how to clone my form rows and append an incriminting number to the end of the ID's for each form field. So I thought with that appended incriminenting number at the end of the ID it would then be easy to use on change event to copy the value of one id to another, but this is not working for the cloned rows!

我正在使用它来创建新的表单行:

I am using this to create new form rows:

$('#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"字段.不过，它仅适用于第一个，不适用于克隆"表单字段:

And I am (trying) to use this code to copy the serialized product id .val(value.split('-')[3]) from the product select value to the 'id' field in the form. It only works for the first one though, and does not work on the 'cloned' form fields:

 $("#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上，这样可以更轻松地了解我的问题: 演示

I put this on jsfiddle so it will be easier to see what my problem is: Demo

推荐答案

在使用克隆创建select并动态附加到DOM时，因此您需要为其提供委托事件处理程序

As you're creating select using clone and append to DOM dynamically, so you need delegate event handler for them

// 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();

DEMO

DEMO

这篇关于克隆字段的jQuery onchange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！