0

我正在尝试通过创建唯一 ID 将一行克隆到内容中，但我遇到了一些问题。

HTML：

<div class="content">
    <div id="email-container" class="email-container">
            <input type="text" value="" placeholder="Email">
            <input type="text" value="" placeholder="Email">
            <input type="text" value="" placeholder="Email">
            <span class="plus-button">+</span>
        </div>
</div>

JavaScript：

$('.plus-button').click(function(){
    $('.email-container').clone().insertAfter(".email-container").end();
    $('.email-container').find('.plus-button').text('-').not(':last-child');
});

请在下面找到我的小提琴：

http://jsfiddle.net/meetravi/GCRVS/3/

我正在尝试克隆#email-container并将其添加到内部.content并清除文本框值，并且还需要将.plus-button值更改为“-”，最后一行除外。

4

3 回答 3

4

试试这个：而且你不需要 id #email-container。

$(document).on('click', '.plus-button', function(){
    var content = $(this).text();
    if(content == '+'){
        $(this).parent().clone(true, true).insertAfter($(this).parent());
        $('.email-container').each(function(){
            if(!$(this).is(':last-child')){
                $(this).find('.plus-button').html('-');
            }
        });
    }
    else{
        $(this).parent().remove();

    }
});

编辑：我进行了重大编辑，插入 if/else 以解决删除问题...

EDIT2：必须说 insertAfter($(this).parent()

于 2012-08-20T11:56:27.353 回答
3 
<div class="content">
    <div id="email-container" class="email-container">
        <input class="1" type="text" value="" placeholder="Email">
        <input class="1" type="text" value="" placeholder="Email">
        <input class="1" type="text" value="" placeholder="Email">
        <span class="plus-button">+</span>
    </div> 
</div>

$(document).ready(function()
{
    $('.plus-button').click(AddNewRow);
});

function AddNewRow(event)
{
   var clone = $('.email-container').last().clone().appendTo('.content');
   clone.children('.1').val(''); //delete all values of your clone
   clone.children('.plus-button').bind('click', AddNewRow);

   var btn = $(this).parent().find('.plus-button');  //The cloned button
   btn.text('-');
   btn.removeClass('plus-button');
   btn.addClass('minus-button');
   btn.unbind('click');  //unbind the "old" click event
   btn.click(RemoveRow);
}


function RemoveRow(event)
{
    $(this).parent().remove();
}

这应该可以解决问题。提示：当您在 DOM 中创建新元素时，您应该手动绑定项目或使用“on”

编辑：删除 .live() 因为它的弃用

于 2012-08-20T12:03:37.037 回答
2

对于动态生成的元素，应委托单击事件，您可以使用该on方法，请注意，我已从您的标记中删除了 ID 属性，因为 ID 应该是唯一的，并且在文档中具有相同的 ID 属性使其无效。尝试以下操作：

$(document).on('click', '.plus-button', function(){
    $('.email-container:last').clone().insertAfter(".email-container:last")
    $('.email-container:not(:last)').find('.plus-button').attr('class', 'remove').text('-');
});

$(document).on('click', '.remove ', function(){
    $(this).closest('.email-container').remove();
});

小提琴

于 2012-08-20T11:57:05.730 回答