событие click в вопросе jQuery - PullRequest
Новая
       10

событие click в вопросе jQuery

0 голосов
/ 11 июня 2010

У меня есть 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>

Любые идеи, почему это не работает ... кажется, что эти два события закодированы одинаково. Я ставлю alert('test'); как первое, что происходит в обоих событиях, и появляется предупреждение с первым, а не со вторым :(

Спасибо, Христо

Ответы [ 2 ]

2 голосов
/ 11 июня 2010

Ваш второй обработчик пытается присоединиться к элементам LI с помощью класса buddy-tab внутри элемента, который имеет главную панель идентификатора, и ваш HTML не содержит таких элементов.Поэтому событие никогда не запускается.

Чтобы прикрепить событие к динамически добавляемым элементам, используйте live jQuery.

1 голос
/ 11 июня 2010

Как упоминает @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() {
...