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 タグの 1 つがコメント化されています。そのコメントを閉じると、要素が適切な場所に追加されます。

<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の1つがコメントアウトされたままになっています（これが、余分なdivを追加して修正した理由です。次のように閉じる必要があります：

<!-- .controls -->
于 2013-09-06T17:58:28.983 に答える