CODEWITHSUNDEEP
jqueryclick
MacMac
MacMac

Reputation: 35321

Can't click on element from jQuery html()

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.

Upvotes: 0

Views: 2697

Answers (6)

Rodolfo Palma
Rodolfo Palma

Reputation: 2931

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

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125498

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().

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630439

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.

Upvotes: 6

nickf
nickf

Reputation: 546085

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

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

Upvotes: 0

Matt
Matt

Reputation: 75317

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

Upvotes: 0

0x1F602
0x1F602

Reputation: 865

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

Upvotes: 0

Related Questions