Question

我有以下小提琴：

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元素？谢谢您的帮助！我希望这个小提琴比在帖子中粘贴一堆代码更有帮助。

Answer 1

问题出在您的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();
    …
});

但是，新按钮没有事件绑定，因此任何新的表单元素集仍然缺少功能。

Demo fiddle

即使使用简单，天真的基于字符串的模板，代码也可以大大简化。 Linked是一个未经测试的小提琴，展示了如何使用此方法完成。

Demo fiddle

代码简化为以下内容：

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'));
});

递归ID和重复的表单元素

1 个答案: