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