Функция jQuery onclick не запускается

Question

У меня есть «ссылка», которая при нажатии покажет div, полный содержимого. После нажатия кнопка «Открыть» превращается в кнопку «Закрыть» с функцией закрытия.

Вот jQuery:

$(document).ready(function(){


    $('.open_user_urls').click(function() {
            $('#user_urls').slideDown('slow');
            $('.open_user_urls').addClass('close_user_urls');
            $('.open_user_urls').removeClass('open_user_urls');
            $('.close_user_urls').html('Close Search History');
            return false;
        }
    );

    $('.close_user_urls').click(function() {
            $('#user_urls').slideUp('slow');
            $('.close_user_urls').addClass('open_user_urls');
            $('.close_user_urls').removeClass('close_user_urls');
            $('.open_user_urls').html('Show Search History');
            return false;
        }
    );

});

Работает как положено с первого клика. Показывается div, содержание html изменяется на новый текст, а класс изменяется по ссылке.

Но повторное нажатие, чтобы закрыть, ничего не дает. Если я вставляю функцию щелчка .close__user_urls в консоль Firebug, запускаю ее, а затем нажимаю, она закрывается, как и ожидалось.

Есть идеи?

Answer 1

Класс $ ('. Close_user_urls') не существует, когда страница заполнена, поэтому он не существует, когда его щелчок привязан к $ (document) .ready ().

Самый простой способ сделать это с помощью jQuery 1.3.2 - использовать вместо этого «живую» функцию:

$(document).ready(function(){
   $('.open_user_urls').live('click', function() {
       $('#user_urls').slideDown('slow');
       $(this).addClass('close_user_urls');
       $(this).removeClass('open_user_urls');
       $(this).html('Close Search History');
       return false;
   });

   $('.close_user_urls').live('click', function() {
       $('#user_urls').slideUp('slow');
       $(this).addClass('open_user_urls');
       $(this).removeClass('close_user_urls');
       $(this).html('Show Search History');
       return false;
   }); 
)};

Живые функции привязывают указанное событие ко всем текущим и будущим соответствующим элементам.

Answer 2

Я бы сделал это иначе:

$(document).ready(function(){
    $('.open_user').click(function() {
        var link = $(this);
        if (link.hasClass('opened')) {
            link.removeClass('opened').text('Show Search History');
            $('#user_urls').slideUp('slow');
        } else {
            link.addClass('opened').text('Close Search History');
            $('#user_urls').slideDown('slow');
        }
        return false;
    }
);

Answer 3

Я полагаю, что вторая функция применяется только к элементам, которые имеют этот класс CSS .close_user_urls, который изначально равен 0.

В более старых версиях jQuery плагин livequery позволит jQuery отслеживать и добавлять / удалять события щелчка, когда элементы получают и теряют классы css. В более новых версиях это встроено, как упомянуто в ответе выше.