Question

我有以下代码库：

我点击按钮时使用的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正在递增，但是我不能为我的生活找出为什么当我点击“添加位置”时，添加的框出现在按钮上方（如我所愿），但当我点击它会出现在框下方，“添加高级培训”。我希望“添加高级培训也会出现在按钮上方。”

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

有什么想法？谢谢！

Answer 1

您缺少结束评论标记：

<!--.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 -->

Answer 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>

Answer 3

发现错误：您忘了关闭最后一个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 -->

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

3 个答案: