jquery - jQuery .append Issue

Question

This is my code:

$('.add').click(function(){
    $('#test').append("<div class='tab selected'>TEST</div>");
});
$('.tab').click(function(){
    $('.tab').removeClass('selected').addClass('unselected');
    $(this).removeClass('unselected').addClass('selected');
});

<input type='button' value='add' class='add' />
<div id='test'>
    <div class='tab unselected'>TEST</div>
</div>

This is my issue:

When I click the .tab div that was already defined in html, the function works fine. But, if I add another .tab div using the .add input, the function does not work.

What exactly am I doing wrong here?

Answer 1

イベント ハンドラーは、実行時に存在する要素にバインドされます。動的なコンテンツの更新の場合は、ハンドラーを再バインドするか、以下のような委任されたイベントを使用することをお勧めします。

$('#test').on('click', '.tab', function(){
    $('.tab').removeClass('selected').addClass('unselected');
    $(this).removeClass('unselected').addClass('selected');
});

または、以下のように再バインドできます。

$('.add').click(function(){
    $('.tab').removeClass('selected'); //comment from @MG_Bautista
    var newTab = $('<div />')
                   .addClass('tab selected')
                   .click(tabFx)
                   .text('Test');
    $('#test').append(newTab);
});

$('.tab').click(tabFx);

function tabFx(){
    $('.tab').removeClass('selected').addClass('unselected');
    $(this).removeClass('unselected').addClass('selected');
}

Answer 2

これを使って...

$('.add').click(function(){
    $('.tab').removeClass('selected').addClass('unselected');
    $('#test').append("<div class='tab selected'>TEST</div>");
});

$('#test').on('click', '.tab', function(){
    $('.tab').addClass('unselected');
    $(this).removeClass('unselected');
    $('.tab').removeClass('selected');
    $(this).addClass('selected');
});

そして、デモを参照してください

Answer 3

"live" または "on" のいずれかを使用してください... jquery 1.7 以下を参照している場合は live が機能します....最新の jquery を使用している場合は "on" を使用してください

$('#test').on('click', '.tab', function(){
    $('.tab').removeClass('selected').addClass('unselected');
    $(this).removeClass('unselected').addClass('selected');
});

また

$('#test').live('click', '.tab', function(){
    $('.tab').removeClass('selected').addClass('unselected');
    $(this).removeClass('unselected').addClass('selected');
});