jquery - jQuery .append 问题

Question

这是我的代码：

$('.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>

这是我的问题：

当我单击.tab已在 html 中定义的 div 时，该功能工作正常。但是，如果我使用输入添加另一个.tabdiv .add，则该功能不起作用。

我在这里到底做错了什么？

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