click event in jQuery question

Question

I have 2 click event functions that are practically identical... one works and the other doesn't.

// click event on buddy in #chatpanel
$('#chatpanel a.buddy').click(function() {
    // if a chat window is already active, close it and deactivate
    $('#mainpanel li[class="active-buddy-tab"]').removeClass('active-buddy-tab').addClass('buddy-tab');
    $('#mainpanel').append('<li class="active-buddy-tab"><a class="buddy-tab" href="#"></a><div id="chat-window" /></li>');
    return false;
});

// click event on buddy tab in #mainpanel
$('#mainpanel li.buddy-tab').click(function() {
    // if a chat window is already active, close it and deactivate
    $('#mainpanel li[class="active-buddy-tab"]').removeClass('active-buddy-tab').addClass('buddy-tab');     
    $(this).removeClass('buddy-tab').addClass('active-buddy-tab');
    return false;
});

When I click on a buddy in #chatpanel, it correctly brings in a new chat window and if there is an existing one, it deactivates it and makes the new one active.

When I try to click on a deactivated tab, it should deactive the currently active chat window and make the tab the active window... but it doesn't. Here's the HTML:

        <ul id="mainpanel">
        <li id="chatpanel">
            <a href="#" class="chat">Friends (<strong>18</strong>) </a>
            <div class="subpanel">
                <h3><span> &ndash; </span>Friends Online</h3>
                <ul>
                    <li><span>Family Members</span></li>
                    <li><a href="#" class="buddy"><img src="images/chat-thumb.gif" alt="" /> Your Friend 1</a></li>
                    <li><a href="#" class="buddy"><img src="images/chat-thumb.gif" alt="" /> Your Friend 2</a></li>
                    <li><a href="#" class="buddy"><img src="images/chat-thumb.gif" alt="" /> Your Friend 3</a></li>
                </ul>
            </div>
        </li>
        </ul>

The following is what gets appended when the first click event happens multiple times:

<li class="buddy-tab">
   <a href="#" class="buddy-tab"></a>
   <div id="chat-window"></div>
</li>
<li class="active-buddy-tab">
   <a href="#" class="buddy-tab"></a>
   <div id="chat-window"></div>
</li>

Any ideas why this isn't working... it seems like the 2 events are coded identically. I put an alert('test'); as the first thing to happen in both events and the alert appears with the first and not the second :(

Thanks, Hristo

Answer 1

Your second handler attempts to attach to LI elements with the buddy-tab class within an element that has the ID mainpanel, and your HTML doesn't include any such elements. Therefore, the event never fires.

In order to attach the event to elements that you add dynamically, use the live jQuery function.

Answer 2

As @jmbledsoe mentions, try replacing

$('#chatpanel a.buddy').click(function() {

with

$('#chatpanel a.buddy').live('click', function() {

...and...

$('#mainpanel li.buddy-tab').click(function() {

with

$('#mainpanel li.buddy-tab').live('click', function() {