克隆元素，但它们必须具有“唯一属性” - Clone elements but they must have "unique properties"

Clone elements but they must have "unique properties"

>演示

这是我到目前为止的设置：

我可以预览目标收件人的邮件。但是，我需要动态添加更多收件人的功能。我几乎已经完成了它的基本功能。

问题#1：我的问题是每当我添加新收件人时，keyup不再适用于后续字段。

问题#2：另外，如何在克隆第一个div之前清除字段？还是我使用其他方法而不使用.clone()？

问题#3：最后，如何使每个字段独一无二？请注意，在我的脚本文件和我使用的类中，它们都是相同的，因此我在第一个字段中输入的任何内容都将复制到所有预览中。

演示

首先，您必须使用 on（）事件委托，以便 keyup 适用于动态元素，并且要键入它的唯一文本，您必须使用 .closest（）找到sub_container

$(document).on('keyup', '.name', function (e) {
    var input = $(this).val().replace(/['n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_name').html(input);
});
$(document).on('keyup', '.message', function (e) {
    var input = $(this).val().replace(/['n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_message').html(input);
});
$('.add_new').click(function (e) {
    //var container = $('.sub_container').html();
    //$('.container').append(container);
    $('.sub_container').first().clone().appendTo('.container').find('input').val('');
    $('.preview_message').last().html('');
    $('.preview_name').last().html('');
});

演示

您只需要添加.clone(true)即可克隆附加到元素的事件侦听器。

$('.add_new').click(function(e) {
        //var container = $('.sub_container').html();
        //$('.container').append(container);
        $('.sub_container').first().clone().appendTo('.container');
});

成为

$('.add_new').click(function(e) {
        //var container = $('.sub_container').html();
        //$('.container').append(container);
        $('.sub_container').first().clone(true).appendTo('.container');
    });

更新的小提琴。

.clone（）文档。

如果您添加 parent（）.parent（），它只会更新您当前正在编辑的表单元素旁边的预览区域：

http://jsfiddle.net/Z8MyX/3/

$('.name').keyup(function(e) {
        var input = $(this).val().replace(/['n]/g,'<br />');
        $('.preview_name').html(input);
    });
    $('.message').keyup(function(e) {
        var input = $(this).val().replace(/['n]/g,'<br />');
        $(this).parent().parent().find('.preview_message').html(input);
    });
    $('.add_new').click(function(e) {
        //var container = $('.sub_container').html();
        //$('.container').append(container);
        $('.sub_container').first().clone(true).appendTo('.container');
    });

事件委派

$(document).on('keyup', '.name', function (e) {
    var input = $(this).val().replace(/['n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_name').html(input);
});
$(document).on('keyup', '.message', function (e) {
    var input = $(this).val().replace(/['n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_message').html(input);
});

$(document).on('click', '.add_new', function (e) {
    //var container = $('.sub_container').html();
    //$('.container').append(container);
    $('.sub_container').first().clone().appendTo('.container').find(':input').val('');
});

演示：小提琴