jQuery克隆选择框投递无价值

Question

根据这个question，我构建了一个克隆脚本，它创建了一个选择框和一个内联文本字段。一切正常，但提交表单时选择框不会提供任何价值。文本字段的值将被提交。

我试图缓存这个盒子的 onChange 事件：

$("#item-1-deposit").change(function(){
    alert($("#item-1-deposit").val());
});

但什么也没发生。如果我引用“#item-0-deposit”，这是可行的，这是我克隆的基本元素。

我的 HTML

<div id="items">
     <input type="hidden" id="itemCounter" name="itemCounter" value="0">
     <div class="item">
         <div class="form-group">
             <div class="col-md-2">Nr. <span id="count-0">1</span></div>
             <div class="col-md-4"><f:form.select property="deposits.0.deposit" options="{deposits}" id="item-0-deposit" class="form-control" tabindex="11"/></div>
             <div class="col-md-3"><f:form.textfield property="deposits.0.amount" placeholder="Menge" id="item-0-amount" class="form-control" tabindex="12"/></div>
          </div>
     </div>
 </div>

我的 jQuery 是：

/* 
 * add fields for sub inspections of a main inspection
 */
$(document).ready(function()
{
    // Accepts an element and a function
    function childRecursive(element, func){
        // Applies that function to the given element.
        func(element);
        var children = element.children();
        if (children.length > 0) {
            children.each(function (){
                // Applies that function to all children recursively
                childRecursive($(this), func);
            });
        }
    }

    // Expects format to be xxx-#[-xxxx] (e.g. item-1 or item-1-name)
    function getNewAttr(str, newNum){
        // Split on -
        var arr = str.split('-');
        // Change the 1 to wherever the incremented value is in your id
        arr[1] = newNum;
        // Smash it back together and return
        return arr.join('-');
    }

    // Expects format to be yyyyy[xxx][#][xxxx] (e.g.  depositInspection[deposits][0][deposit])
    function getNewFluidVar(str, newNum){
        // Split on -
        var arr = str.split('][');
        // Change the 1 to wherever the incremented value is in your id
        arr[1] = newNum;
        // Smash it back together and return
        return arr.join('][');
    }

    // Written with Twitter Bootstrap form field structure in mind
    // Checks for id, name, and for attributes.
    function setCloneAttr(element, value){
        // Check to see if the element has an id attribute
        if (element.attr('id') !== undefined){
            // If so, increment it
            element.attr('id', getNewAttr(element.attr('id'),value));
        }
        // so with the name...
        if(element.attr('name') !== undefined){
            element.attr('name', getNewFluidVar(element.attr('name'),value));
        }
        // so with the labels.
        if (element.attr('for') !== undefined){
            element.attr('for', getNewAttr(element.attr('for'),value));
        }
        // so with the count.
        if (element.attr('count') !== undefined){
            element.attr('count', getNewAttr(element.attr('count'),value));
            element.text(Number(element.text()) + 1);
        }
        // so with the tabindex.
        if (element.attr('tabindex') !== undefined){
            element.attr('tabindex', Number(element.attr('tabindex')) + value*2);
        }
    }

    // Sets an element's value to ''
    function clearCloneValues(element){
        if (element.is("select")){
            element.prop('selectedIndex', -1);
        }
        if (element.attr('value') !== undefined){
            element.val('');
        }
    }

    $('#addItem').click(function(){
        var fieldsCount = $('#fieldsCount').val();
        for (var i = 0; i < fieldsCount; i++){
            //increment the value of our counter
            $('#itemCounter').val(Number($('#itemCounter').val()) + 1);
            //clone the first .item element
            var newItem = $('div.item').first().clone();
            //recursively set our id, name, and for attributes properly
            childRecursive(newItem, 
                // Remember, the recursive function expects to be able to pass in
                // one parameter, the element.
                function(e){
                    setCloneAttr(e, $('#itemCounter').val());
            });
            // Clear the values recursively
            childRecursive(newItem, 
                function(e){
                    clearCloneValues(e);
                }
            );
            // Finally, add the new div.item to the end
            newItem.appendTo($('#items'));
        }
        return false;
    });
});

（顺便说一句，我没明白，如何在 span 元素中增加行号）

Answer 1

对于克隆项目，您需要使用事件委托。试试这个：

$(document).on("change", "#item-1-deposit", function(){
    alert($("#item-1-deposit").val());
});