2

デモ

これまでの私のセットアップは次のとおりです。

意図した受信者へのメッセージをプレビューできます。ただし、受信者を動的に追加する機能が必要です。私はその基本的な機能をほとんど持っています。

問題 #1:私の問題は、新しい受信者を追加するたびにkeyup、後続のフィールドで機能しなくなることです。

問題 #2:また、最初の div を複製する前にフィールドをクリアするにはどうすればよいですか? または、別の方法を使用し、使用しません.clone()か?

問題 #3:最後に、各フィールドを一意にするにはどうすればよいですか? スクリプト ファイルと使用したクラスに注意してください。それらはすべて同じであるため、最初のフィールドに入力したものはすべて、すべてのプレビューにコピーされます。

デモ

4

4 に答える 4

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 に答える
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 に答える