递归 ID 和重复表单元素

Recursive IDs and duplicating form elements

本文关键字：表单 元素 ID 递归      更新时间：2023-09-26

我有以下小提琴：

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元素顺序错误？ 感谢您的帮助！ 我希望小提琴比在消息中粘贴一堆代码更有帮助。

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

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

演示小提琴

使用简单、朴素的基于字符串的模板，代码也可以大大简化。 链接是一个未经测试的小提琴，显示了如何使用这种方法来完成它。

演示小提琴

代码简化为以下内容：

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'));
});
相关文章：