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 回答