0

我有以下代码库：

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 正确递增，但是我一生都无法弄清楚为什么当我单击“添加位置”时，添加的框会出现在按钮上方（如我所愿），但是当我单击“添加高级培训”它出现在框下方。我希望“添加高级培训”也出现在按钮上方。

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

有什么想法吗？谢谢！

4

3 回答 3

2

您缺少一个结束评论标签：

<!--.controls-->

为了帮助发现它，在小提琴中运行一个快速的 Tidy 重新格式化为：

<!-- 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 -->
于 2013-09-06T17:57:30.620 回答
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>
于 2013-09-06T17:57:41.157 回答
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 -->
于 2013-09-06T17:58:28.983 回答