克隆要素，但它們必須具有「獨特性」

Demo 克隆要素，但它們必須具有「獨特性」

這裏是我的設置至今：

我可以預覽郵件的收件人。但是，我需要功能來動態添加更多收件人。我幾乎擁有完成的基本功能。

問題1：我的問題是每當我添加一個新的收件人，keyup不再適用於後續字段。

問題2：另外，在克隆第一個div之前，如何清除這些字段？或者我使用不同的方法，不使用.clone()？

問題3：最後，我如何讓每個字段都是唯一的？注意我的腳本文件和我使用的類，它們都是相同的，所以無論我在第一個字段中輸入的內容都將被複制到所有預覽中。

Demo

來源

2013-10-18 user2772219

試試'.clone（true）' – elclanrs

首先，你必須使用on（）事件代表團因此KEYUP動態元素的作品，並就其類型的唯一文本，你必須找到使用.closest（）

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

DEMO

的sub_container 。

來源

2013-10-18 07:41:35 Anton

不需要開啓，只需將克隆設置爲true，並使用最接近的anton建議來定位相關字段。 –

你只需要添加.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'); 
    });

Updated Fiddle.

.clone() docs.

來源

2013-10-18 07:36:47

事件代表團

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

演示：Fiddle

來源

2013-10-18 07:39:48

謝謝。如何在克隆之前清除輸入字段？所以無論何時我添加一個新的收件人，它都將是一個空白的表單。 – user2772219

如果添加父（）父（），它只會更新預覽區旁形成元素，你正在編輯：

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-18 07:43:12 w3bMak3r

克隆要素，但它們必須具有「獨特性」

回答

相關問題