jQuery clone()的问题:克隆输入没有值

时间:2011-08-19 10:35:37

标签: javascript jquery

我正在使用jquery .clone(),它运行正常。但是我的问题是,当我克隆输入字段时,它还克隆了前一个字段的值。我不想克隆这个值。我怎样才能克服这个问题?

这是我的代码

function addrow(){
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);     
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
    $('#input' + num).after(newElem);

    jQuery('.clonedInput').each(function(){
        jQuery('#total', jQuery(this)).unbind('blur');
    });

    var ci = jQuery('.clonedInput:last');
    jQuery('#total', ci).blur(function() {
        addrow();
    });
}

此致

Faizan

5 个答案:

答案 0 :(得分:3)

试试这个:

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

答案 1 :(得分:1)

我可能会迟到,但目前尚不清楚你的“#input”是否实际上是一个输入字段。只有这样你才能设置它的价值。

放置克隆元素后,请尝试:

newElem.find('input:first').val(null);

答案 2 :(得分:0)

在克隆

之后添加此行
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.removeAttr('value');

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

答案 3 :(得分:0)

与我合作:

<div id="con">
<input id="input1" value="some text" />
</div>


$("#input1").clone().val("").attr("id", "input2").appendTo("#con");

http://jsfiddle.net/sXL2b/

或使用insertAfter:

http://jsfiddle.net/sXL2b/1/

尝试此操作而不是克隆: http://jsfiddle.net/sXL2b/4/

你真的需要克隆吗?

答案 4 :(得分:0)

您可以使用.val(&#34;&#34;)清除所有输入:

<div class="">        
    <div id="references">
        <div class="">
            <div class="">
                <div class="">
                    <input type="text" name="name-reference" class="" placeholder="Name" >

                </div>
                <div class="">
                    <input type="text" name="relationship-reference" class="" placeholder="Relationship" >
                </div>
            </div>
        </div>
        <div class="">
            <div class="">
                <div class="">
                    <input type="text" name="employer-reference" class="" placeholder="Employer" >
                </div>
                <div class="">
                    <input type="tel" name="phone-reference" class="" placeholder="Phone Number" >
                </div>
            </div>
        </div>
        <div class="">
            <button id="add" class="">Add</button>
            <button id="remove" style="display:none;">Remove</button>


    </div>
</div>

剧本:

var reference_form_index = 0;
$("#add").on('click', function(){
   reference_form_index ++;        

    $(this).parent().parent().after($("#references").clone().attr("id","references" + reference_form_index));

    $("#references" + reference_form_index + " :input").each(function(){
        $(this).attr("name",$(this).attr("name") + reference_form_index);
        $(this).attr("id",$(this).attr("id") + reference_form_index);
        $(this).val('');
    });

$("#remove" + reference_form_index).css('display', 'inline');

$(document).on( 'click', "#remove" + reference_form_index, function(event){
        $(this).parent('div').parent('div').remove();
    } );

    $("#add" + reference_form_index).remove();

});

您可以在以下操作中看到它: http://jsfiddle.net/pnovales/yF2zE/5/