Jquery 追加问题

这是我的代码：

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

$（'.add'）。单击（函数（）{
$（'test'）。附加（“test”）；
});
$（'.tab'）。单击（函数（）{
$（'.tab'）.removeClass（'selected'）.addClass（'unselected'）；
$（this）.removeClass（'unselected'）.addClass（'selected'）；
});
测验

这是我的问题：

当我单击html中已经定义的

.tab

div时，该函数工作正常。 但是，如果我使用

.add

输入添加另一个

.tab

div，该函数将不起作用

---

我到底做错了什么？

事件处理程序绑定到执行时存在的元素。在动态内容更新的情况下，您的赌注是重新绑定处理程序或使用以下委托事件

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

$（'.add'）。单击（函数（）{
$（'.tab'）.removeClass（'selected'）；//来自@MG_Bautista的注释
var newTab=$（''）
.addClass（'已选择选项卡'）
。单击（tabFx）
.文本（“测试”）；
$（'#test'）。追加（newTab）；
});
$（'.tab'）。单击（tabFx）；
函数tabFx（）{
$（'.tab'）.removeClass（'selected'）.addClass（'unselected'）；
$（this）.removeClass（'unselected'）.addClass（'selected'）；
}

事件处理程序绑定到执行时存在的元素。在动态内容更新的情况下，您的赌注是重新绑定处理程序或使用以下委托事件

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

$（'.add'）。单击（函数（）{
$（'.tab'）.removeClass（'selected'）；//来自@MG_Bautista的注释
var newTab=$（''）
.addClass（'已选择选项卡'）
。单击（tabFx）
.文本（“测试”）；
$（'#test'）。追加（newTab）；
});
$（'.tab'）。单击（tabFx）；
函数tabFx（）{
$（'.tab'）.removeClass（'selected'）.addClass（'unselected'）；
$（this）.removeClass（'unselected'）.addClass（'selected'）；
}

使用“live”或“on”。。。 如果您正在引用jquery 1.7或更低版本，那么live将起作用……如果您正在使用最新的jquery，请使用“on”

或

使用“live”或“on”。。。 如果您正在引用jquery 1.7或更低版本，那么live将起作用……如果您正在使用最新的jquery，请使用“on”

或

用这个

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

$（'.add'）。单击（函数（）{
$（'.tab'）.removeClass（'selected'）.addClass（'unselected'）；
$（'test'）。附加（“test”）；
});
$（'#test'）。在（'单击'，'.tab'，函数（）上{
$（'.tab'）.addClass（'unselected'）；
$（this.removeClass（'unselected'）；
$（'.tab'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});

请参见使用此

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

$（'.add'）。单击（函数（）{
$（'.tab'）.removeClass（'selected'）.addClass（'unselected'）；
$（'test'）。附加（“test”）；
});
$（'#test'）。在（'单击'，'.tab'，函数（）上{
$（'.tab'）.addClass（'unselected'）；
$（this.removeClass（'unselected'）；
$（'.tab'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});

---

请参见

即使对于较旧的版本，

.delegate

也建议优于

.live

。即使对于较旧的版本，

.delegate

也建议优于

.live

。哦，我现在明白了，这是有道理的。谢谢您的帮助。@Vega如果您clic两次或两次以上，新选项卡显示为选中，选择是唯一的，请在行

$（'.tab'）之前添加
$（'.tab'）。removeClass（'selected'）
）。append（newTab）@user1885099阅读了评论…@MG_Bautista一定是源于原始代码的错误，但已修复。谢谢，我现在明白了，这是有道理的。谢谢您的帮助。@Vega如果您clic两次或两次以上，新选项卡显示为选中，选择是唯一的，请在行
$（'.tab'）之前添加
$（'.tab'）。removeClass（'selected'）
）。append（newTab）@user1885099阅读了评论…@MG_Bautista一定是源于原始代码的错误，但已修复。谢谢