复制字段元素和重复项的位置

时间:2013-09-06 17:49:25

标签: javascript jquery

我有以下代码库:

http://jsfiddle.net/XpAk5/47/

我点击按钮时使用的JS就在这里。我把它附加到#advTrains。这在播放的位置(#kpPositions)中工作正常。当我看到它为什么代码表现不同时没有意义。

$('#addTraining').click(function(){
    //increment the value of our counter
    $('#kpAdvancedTrain').val(Number($('#kpAdvancedTrain').val()) + 1);
    //clone the first .item element
    var newItem = $('div.advtrain').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, $('#kpAdvancedTrain').val());
    });
    // Clear the values recursively
    childRecursive(newItem, 
        function(e){
            clearCloneValues(e);
    });
    // Finally, add the new div.item to the end
    newItem.appendTo($('#advTrains'));
});

元素和ID正在递增,但是我不能为我的生活找出为什么当我点击“添加位置”时,添加的框出现在按钮上方(如我所愿),但当我点击它会出现在框下方,“添加高级培训”。我希望“添加高级培训也会出现在按钮上方。”

我确信这很简单,但是我已经看了很长时间这段代码,并且无法想出发生这种情况的原因。

有什么想法?谢谢!

3 个答案:

答案 0 :(得分:2)

您缺少结束评论标记:

<!--.controls-->

为了帮助发现它,在小提琴中运行快速整理,重新格式化为:

<!-- Advanced training code begin -->
<div id="advTrains">
    <input type="hidden" id="kpAdvancedTrain" name="kpAdvancedTrain" value="0" />
    <div class="advtrain" id="advtrain">
        <div class="control-group">
            <label class="control-label" for="item-0-name">Advanced Training</label>
            <div class="controls">
                <input type="text" name="kpAdvancedTrain_0" id="kpAdvancedTrain_0" class="input-large" />
            </div>
            <!--.controls>
            </div><!-- .control-group-->
        </div>
        <!-- .advtrain -->

答案 1 :(得分:2)

错误出现在您的HTML中:您忘记关闭评论,因此其中一个结束div标记已被注释掉。关闭该评论,您的元素将添加到适当的位置。

<div class="control-group">
    <label class="control-label" for="item-0-name">Advanced Training</label>
    <div class="controls">
         <input type="text" name="kpAdvancedTrain_0" id="kpAdvancedTrain_0" class="input-large">
    </div>
    <!--.controls> --> <!-- this comment wasn't closed -->
    </div><!-- .control-group-->
</div>

答案 2 :(得分:1)

发现错误:您忘了关闭最后一个div标签。

    <!-- Advanced training code begin -->    
<div id="advTrains">
    <input type="hidden" id="kpAdvancedTrain" name="kpAdvancedTrain" value="0">
        <div class="advtrain" id="advtrain">
            <div class="control-group">
                <label class="control-label" for="item-0-name">Advanced Training</label>
                    <div class="controls">
                        <input type="text" name="kpAdvancedTrain_0" id="kpAdvancedTrain_0" class="input-large">
                    </div> <!--.controls>
            </div><!-- .control-group-->
        </div><!-- .advtrain -->   
</div><!-- #advTrains -->
</div> <!----NEED TO CLOSE LAST DIV ------>
编辑:实际上,您忘了关闭评论。它保留了你的一个div被注释掉(这就是为什么添加额外的div修复它。你需要像这样关闭它:

<!-- .controls -->