无法点击jQuery html()中的元素

Question

我有这个jQuery AJAX代码,当请求成功时,它会这样做:

success: function(msg)
{
    $('.login-msg').css('color', 'green');
    $('.login-msg').hide().html(msg).fadeIn('slow');
    $('#user-tools').hide().html('<span class="user-credits"><a href="javascript:void(0);" class="logout-btn">Logout</a></span>').fadeIn('slow');
}

但是,我无法点击logout-btn具有jQuery点击功能的类的链接,该类将注销用户,但是当我刷新页面时,它仍然具有以下HTML:

<span class="user-credits"><a href="javascript:void(0);" class="logout-btn">Logout</a></span>

但是为什么我不能点击它来完成这里完成的点击功能:

$('.logout-btn').click(function(){
    $.ajax({
    url: 'include/logout.php',
    cache: false,
        success: function(msg)
        {
            $('.logout-btn').html('<p><img src="img/loading.gif" style="vertical-align: bottom;" /> Refreshing...</p>');

            setTimeout(function() 
            { 
               window.location.reload(); 
            }, 1000);
        },
        error: function()
        {
            $('.logout-btn').css('color', 'red');
            $('.logout-btn').hide().html('Error trying to log out, try again later').fadeIn('slow');
        }
    });
});

干杯.

Answer 1

.live()像这样使用它也适用于未来的元素:

$('.logout-btn').live('click', function(){

这依赖于事件冒泡,因此如果元素在绑定时存在,它就可以工作......所以动态添加的链接将正常工作.