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

Question

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

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

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

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

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

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

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

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

Answer 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 события не запускаются для отключенных элементов.

Answer 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 (второй параметр).

Answer 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');
});

Answer 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');
}); 

Answer 5

try:

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

document.body также помогает для динамического HTML.Просто проверьте это: .on не работает на динамический HTML

Answer 6

Может быть, вы должны сделать:

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

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