0

私は次のフィドルを持っています:

http://jsfiddle.net/XpAk5/63/

ID は適切に増加します。最初の例。問題は、スポーツを追加しようとすると、複製されますが、正しく複製されないことです。追加するボタンが正しく作成されていません。たとえば、スポーツを選択し、ポジションを埋めて別のポジションを追加した場合、それで問題ありません (最初の例として)。しかし、クリックして別のスポーツを追加すると、すぐに 2 つの位置が表示され、ボタンが正しく複製されません。エラーは HTML にあると思いますが、よくわかりません。スポーツを複製するために使用しているJSは次のとおりです。

$('#addSport').click(function(){
    //increment the value of our counter
    $('#kpSport').val(Number($('#kpSport').val()) + 1);
    //clone the first .item element
    var newItem = $('div.kpSports').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, $('#kpSport').val());
    });
    // Clear the values recursively
    childRecursive(newItem, 
        function(e){
            clearCloneValues(e);
    });

誰かがアイデアを持っていることを願って、おそらく HTML 要素の順序が間違っているのでしょうか? ご協力ありがとうございました！メッセージに大量のコードを貼り付けるだけでなく、フィドルが役立つことを願っています。

4

1 に答える 1

2

問題はあなたのclearCloneValues機能にあります。クリアしたい要素のボタンとその他を区別しません。

次のように変更します。

// Sets an element's value to ''
function clearCloneValues(element){
    if (element.attr('value') !== undefined && element.attr('type') !== 'button'){
        element.val('');
    }
}

上記のコメントで @PHPglue が指摘したように、新しいポジションが追加されると、新しくクローンされたものに誤って複製されます (ここでは想定しています)。

年の追加機能にも同様の問題があります。

簡単な修正は、元のフォーム フィールドのクローンを使用して変数を初期化することです。

var $template = $('div.kpSports').first().clone();

次に、addSportハンドラーを次のように変更します。

$('#addSport').click(function () {
    //increment the value of our counter
    $('#kpSport').val(Number($('#kpSport').val()) + 1);
    //clone the first .item element
    var newItem = $template.clone();
    …
});

ただし、新しいボタンにはイベント バインディングがないため、フォーム要素の新しいセットにはまだ機能がありません。

デモフィドル

シンプルで素朴な文字列ベースのテンプレートを使用しても、コードを大幅に簡素化できます。Linked は、このアプローチを使用してどのように実行できるかを示すテストされていないフィドルです。

デモフィドル

コードは次のように簡略化されました。

function getClone(idx) {
    var $retVal = $(templates.sport.replace(/\{\{1\}\}/g, idx));

    $retVal.find('.jsPositions').append(getItemClone(idx, 0));
    $retVal.find('.advtrain').append(getTrainingClone(idx, 0));
    return $retVal;
}

function getItemClone(setIdx, itemIdx) {
    var retVal = itemTemplate.replace(/\{\{1\}\}/g, setIdx).replace(/\{\{2\}\}/g, itemIdx);
    return $(retVal);
}

function getTrainingClone(setIdx, trainingIdx) {
    var retVal = trainingTemplate.replace(/\{\{1\}\}/g, setIdx).replace(/\{\{2\}\}/g, trainingIdx);
    return $(retVal);
}

$('#kpSportPlayed').on('click', '.jsAddPosition', function() {
    var $container = $(this).closest('.kpSports');
    var containerIdx = $container.attr('data_idx');
    var itemIdx      = $container.find('.item').length;

    $container.find('.jsPositions').append(getItemClone(containerIdx, itemIdx));
});

$('#kpSportPlayed').on('click', '.jsAddTraining', function() {
    var $container = $(this).closest('.kpSports');
    var containerIdx = $container.attr('data_idx');
    var trainIdx = $container.find('.advtrain > div').length;

    $container.find('.advtrain').append(getTrainingClone(containerIdx, trainIdx));
});

$('#addSport').click(function () {
    var idx = $('.kpSports').length;
    var newItem = getClone(idx);

    newItem.appendTo($('#kpSportPlayed'));
});
于 2013-09-10T00:09:19.737 に答える