Can't click on element from jQuery html()

Question

I have this jQuery AJAX code, when the request is successful, it does this:

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

However, I can't click on the link with the class logout-btn which has a jQuery click function which will logout the user, although when I refresh the page, it still has the HTML as this:

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

But how come I can't click on it to do the click function done here:

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

Cheers.

Answer 1

I think you need to use livequery. http://docs.jquery.com/Plugins/livequery

Answer 2

click will only register the event handler to those elements that are registered in the DOM at the time the event handler is bound.

Use live instead:

$('.logout-btn').live('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 3

Instead of .click(), use .live()

$('.logout-btn').live('click', function() {
     // etc...
});

Answer 4

Use .live() like this so it works on future elements as well:

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

This relies on event bubbling, so it works if the element is present when it's bound or not...so your dynamically added links will work correctly.

Answer 5

where is the click event handler defined? If it's attached when the DOM has loaded, it's not going to work for a <span> inserted into the DOM at a later point. You either need to attach the event handler after adding the element to the DOM or use some form of event delegation, most likely through using live().

Answer 6

Instead of .live() I'd strongly recommend the use of .delegate(). Usage:

Assuming the following markup:

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

You'd code something like:

$("#parent-box").delegate(".logout-btn", "click", function(event) {
    // Do something
});

In plain English, you're delegating to #parent-box a function that will trigger every time you click .logout-btn.

PD: Remember to chain properties in jQuery:

$('.logout-btn').css('color', 'red').hide().html('Error trying to log out, try again later').fadeIn('slow');