2

演示

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

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

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

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

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

演示

4

4 回答 4

2

首先，您必须使用 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('');
});

演示

于 2013-10-18T07:41:35.230 回答
1

您只需要添加.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() 文档。

于 2013-10-18T07:36:47.557 回答
1

事件委托

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

演示：小提琴

于 2013-10-18T07:39:48.087 回答
1

如果您添加一个 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');
    });
于 2013-10-18T07:43:12.817 回答