jQuery .live() не работает с событием клика

У меня есть календарь ajax, который меняет месяц при нажатии некоторых стрелок. По какой-то причине событие click не работает в методе live(). Раньше работало, а сейчас почему-то нет.

Если я заменю live() на click(), он сработает, но мне нужен метод live().

Предположения

  • Я использую последнюю версию jQuery.
  • Ошибки JS не выдаются.
  • HTML действителен
  • Идет поиск селектора a.x-btn (длина = 2)
  • console.log('Зашли так далеко!') срабатывает правильно.
  • console.log('Sidebar Cal Clicked') не срабатывает вообще.
  • Запуск в среде Wordpress.
  • DOCTYPE установлен для HTML5

//ajax calendars
jQuery(document).ready(function($) {

    //sidebar
    $(function() {
        var s = $('#s-calendar'), p = s.closest('.widget');
        console.log('Got this far!');

        //prevent collapse
        p.css('min-height', p.height());

        s.find('a.x-btn').live('click', function(e) {
            console.log('Sidebar Cal Clicked');
            var d = $(this).attr('data-cal-date'), n = $(this).attr('data-nonce');
            var url = $(this).attr('data-ajaxurl');
            $.ajax({
                url:url,
                type:'POST',
                data:'action=wpcal&sidebar=true&_wpcal_nonce='+n+'&date='+d,
                success:function(data) {
                    s.fadeOut(500, function() {
                        s.html(data).fadeIn(500);
                    });

                }
            });
            return false;
        });

    });
});

ОТВЕТ

Выяснилось, что из-за другой части JS трансляция не работала. Метод live() требует распространения событий для правильной работы. У меня была небольшая строка JS в верхней части моего кода, которую я иногда нахожу полезной.

$('body a[href=#]').click(function(event) { event.preventDefault(); });

Я использую этот код, чтобы страница не прыгала при переходе по бесполезным ссылкам. Это завершает распространение всех тегов «A», которые имеют href="#" при нажатии. Я удалил его, и все работает нормально.

Кроме того, несмотря на то, что говорят документы jQuery, используя jQuery 1.5.2, метод live() работает после обхода DOM. Я пошел дальше и все равно изменил его, просто чтобы соответствовать документации. Но это работает! Спасибо за помощь, ребята!


person Chris    schedule 04.04.2011    source источник


Ответы (6)


Я думаю, это связано с предварительной оценкой s.find. Дает ли использование этого кода разные результаты?

$('#s-calendar a.x-btn').live('click', function(e) {
person Eli    schedule 04.04.2011

Я подозреваю, что здесь может быть какая-то проблема

s.find('a.x-btn')

Проблем с живым кликом быть не должно.

person kobe    schedule 04.04.2011

Предостережения для прямой трансляции: http://api.jquery.com/live/#caveats.

В частности:
"Методы обхода DOM не поддерживаются для поиска элементов для отправки в .live(). Вместо этого метод .live() всегда следует вызывать непосредственно после селектора..."

person entropo    schedule 04.04.2011

Проблема, я думаю, здесь:

s.find('a.x-btn')

Он не возвращает правильный элемент.

person Headshota    schedule 04.04.2011

Может ли это быть вызвано тем, что у вас есть готовый вложенный документ? Можно убрать второй?

//ajax calendars
jQuery(document).ready(function($) {

    //sidebar
    $(function() { // remove this one
person Eli    schedule 04.04.2011

Функция live() была удалена для версий jQuery > 1.9. Попробуйте что-то вроде $('#button_id').on('click', 'button_tag_type', function) или $('body').on('click', '.Button_class', function)

person sap hegde    schedule 06.09.2015
comment
Правильно, и если вам все еще нужно поддерживать код до jQuery 1.9, я предлагаю использовать функцию .delegate: $(document).delegate('#button_id', 'click', function); - для удаления привязки доступно .undelegate (вызовите ее с теми же параметрами, что и предыдущий .delegate). - person Matt; 25.08.2017