Question

我有2个实际上相同的点击事件功能......一个有效，另一个没有。

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

当我点击#chatpanel中的好友时，它会正确地引入一个新的聊天窗口，如果有现有的聊天窗口，它会停用它并使新的聊天窗口处于活动状态。

当我尝试单击已停用的选项卡时，它应该取消激活当前活动的聊天窗口并使选项卡成为活动窗口...但它不会。这是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>

任何想法为什么这不起作用......似乎2个事件编码相同。我把alert('test');作为第一件事发生在两个事件中，警报出现在第一个而不是第二个:(

谢谢，赫里斯托斯

Answer 1

您的第二个处理程序尝试使用具有ID主面板的元素中的buddy-tab类附加到LI元素，并且您的HTML不包含任何此类元素。因此，事件永远不会发生。

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

Answer 2

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

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

带

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

...和...

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

与

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

在jQuery问题中单击事件

2 个答案: