Обработчик события jQuery.on() не работает

Я хочу прикрепить событие к динамически создаваемому элементу класса. Так что я использовал функцию live, но не был вызван. Итак, проверив ссылку на живые функции, там я краю ниже примечаний

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединить обработчики событий. Пользователи более старых версий jQuery должны использовать .delegate() в предпочтении .live().

поэтому решите использовать функцию on, но она все еще не работает. Текстовое поле уже прикреплено с помощью jquery ui datpicker.On другого элемента select я отключено, что поле.

jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');

после отключения, если я нажму, я хочу показать предупреждение или tooltip.so, я попробовал это, но не работал

jQuery(".date_picker_disabled").on("click", function(event){
          alert('hi');
  });

В чем может быть проблема

Я использую jquery 1.7.1 (jquery-1.7.1.min.js)

Ответы

Ответ 1

Проблема заключается в том, что jQuery(".date_picker_disabled") находит элементы с этим классом и связывается с ними. Если элементы не имеют класса во время создания привязки, события не будут обрабатываться.

Функция on позволяет обойти это, обрабатывая их на другом элементе, когда событие "пузырится до" родительского элемента. В этом случае мы можем сказать, что элемент body - может быть более конкретный общий родитель, который вы могли бы выбрать.

jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
    alert('hi');
});

Обработчик событий теперь привязан к элементу document.body. Все клики, которые происходят в любом месте тела, проверяются, чтобы убедиться, что они возникли из элемента, соответствующего селектору. Если это так, обработчик уволен.

Это объясняется в документации для функции on. Это то же поведение, что и в предыдущих версиях jQuery с функциями live и delegate.

Еще раз взглянув на ваш код, вы установите disabled="disabled" на свой input элемент. click события не запускаются при отключенных элементах.

Ответ 2

Это сложно.

Когда ваш код запускается, ваш элемент не имеет класса .date_picker_disabled, поэтому ваш jQuery(".date_picker_disabled") ничего не возвращает и .on() не вызывается.

Примените .on() к внешнему элементу и используйте параметр селектора:

// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
    // do something
});

Это передаст событие в <outer element>. Обработчик будет выполнен только в том случае, если был нажат элемент с классом .date_picker_disabled (второй параметр).

Ответ 3

Из документации .live():

Переписывание метода .live() в терминах его преемников прямой; это шаблоны для эквивалентных вызовов для всех три метода привязки событий:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Итак, в вашем случае вы бы сделали:

$(document).on('click', '.date_picker_disabled', function(event){
    alert('hi');
});

Ответ 4

Я использовал jQuery 1.7.2 и пробовал все предлагаемые методы:

Не работает:

$(document.body).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
});

Не работает:

$(document).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
});

Ни один из них не работал до тех пор, пока я не попробовал следующее:

----- Работает! ----

$('body .collapsible-toggle').on('click',   function() {
        console.log('clicked');
});

Ответ 5

Возможно, вам стоит:

jQuery("body").on("click",".date_picker_disabled", function(event){
          alert('hi');
  });

таким образом вы присоединяете обработчик событий к bosy и указываете, чтобы запустить это событие, только если этот селектор ".date_picker_disabled" соответствует.
Кстати, именно так live() работал