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>

这是我的问题：

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

我到底错在了什么？

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

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

Answer 3

使用此...

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

请参阅DEMO

jQuery .append问题

3 个答案: