单击jQuery问题中的事件

Question

我有两个点击事件函数，实际上是相同的…一个可以工作，而另一个不能。

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

当我在# chat makes中点击一个好友时，它会正确地打开一个新的聊天窗口，如果有一个现有的聊天窗口，它会停用它，并激活新的聊天窗口。

当我尝试点击一个停用的标签时，它应该停用当前活动的聊天窗口，并使该标签成为活动窗口...但事实并非如此。下面是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>

以下是当第一个单击事件多次发生时所附加的内容：

<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>

你知道为什么这不管用吗...看起来这两个事件的编码是一样的。我将alert('test');作为这两个事件中发生的第一件事，警报出现在第一件事上，而不是第二件事上：

谢谢你，Hristo

Answer 1

第二个处理程序试图在一个ID为mainpanel的元素中使用buddy-tab类附加到LI元素，而您的HTML不包含任何这样的元素。因此，该事件永远不会触发。

要将事件附加到动态添加的元素，请使用live jQuery函数。

Answer 2

正如@jmbledsoe提到的，尝试替换

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

使用

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

...and...

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

使用

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