Question

我正在尝试更改我的jquery脚本，我不知道我是否一直在看它很长但我正在尝试将克隆按钮放在容器外但它不起作用，它只是在里面工作。

以下是代码：

function updateClonedInput(index, element) {
    $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
    $(element).find(">:first-child").attr("id", "upload_image_link_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
    $(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", "button.clone", function(e){
    e.preventDefault();
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).parents(".clonedInput").clone();
    updateClonedInput(cloneIndex, new_Input);    
    $('button.remove').show();
});
$(document).on("click", "button.remove", function(e){
    e.preventDefault();
    $(this).parents(".clonedInput").remove();
    if ($('.clonedInput').length < 2) {
        $('button.remove').hide();
    }
    $(".clonedInput").each( function (cloneIndex, clonedElement) {
        updateClonedInput(cloneIndex + 1, clonedElement);
    })
});

这是一个工作小提琴http://jsfiddle.net/d8Tj8/24/

Answer 1

工作

function updateClonedInput(index, element) {
    $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
    $(element).find(">:first-child").attr("id", "upload_image_link_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
    $(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", "button.clone", function(e){
    e.preventDefault();
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
    updateClonedInput(cloneIndex, new_Input);    
    $('button.remove').show();
});
$(document).on("click", "button.remove", function(e){
    e.preventDefault();
    $(this).parents(".clonedInput").remove();
    if ($('.clonedInput').length < 2) {
        $('button.remove').hide();
    }
    $(".clonedInput").each( function (cloneIndex, clonedElement) {
        updateClonedInput(cloneIndex + 1, clonedElement);
    })
});

Answer 2

改变这个......

var new_Input = $(this).parents(".clonedInput").clone();

To This ...

var new_Input = $(".clonedInput").first().clone();

克隆按钮不在克隆div外工作

2 个答案: