jQuery event handler .on() nie działa

Question

Chcę dołączyć wydarzenie do dynamicznie tworzonej klasy elementów. Tak więc użyłem funkcji live, ale nie została ona uruchomiona. Tak więc zaznaczone live function reference, tam i czerwone poniżej notatki

Od jQuery 1.7, metoda .live() jest przestarzała. Użyj funkcji .on() do do dołączania procedur obsługi zdarzeń. Użytkownicy starszych wersji jQuery powinni używać opcji .delegate() zamiast opcji .live().

więc zdecydujesz się skorzystać on funkcji, ale nadal nie pole tekstowe working.The jest już przymocowany z jQuery UI datpicker.On kolejny element wyboru i wyłączył pole.

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

po kliknięciu wyłączone jeśli chcę pokazać wpisu lub tooltip.so próbowałem tego, ale nie działa

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

Co może być problem

używam jQuery 1.7. 1 (jquery-1.7.1.min.js)

Answer 1

Problem polega na tym, że jQuery(".date_picker_disabled") znajduje elementy z tą klasą i wiąże je. Jeśli elementy nie mają klasy w momencie wiązania, zdarzenia nie będą obsługiwane.

Funkcja on umożliwia obejście tego poprzez obsługę ich na innym elemencie, gdy zdarzenie "pęcznieje do" elementu nadrzędnego. W tym przypadku możemy powiedzieć, że element body - może istnieć bardziej konkretny wspólny rodzic, który można wybrać.

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

Obsługa zdarzeń jest teraz powiązana z elementem document.body. Wszystkie kliknięcia, które mają miejsce w dowolnym miejscu w ciele, są testowane pod kątem tego, czy pochodzą od elementu pasującego do selektora. Jeśli tak, program obsługi jest uruchamiany.

Zostało to wyjaśnione w dokumentacji funkcji on. Zachowuje się tak samo, jak w poprzednich wersjach jQuery z funkcjami live i delegate.

---

Wziąwszy kolejny spojrzeć na kodzie, masz disabled="disabled" zestaw na elemencie input. click Zdarzenia nie są uruchamiane przy wyłączonych elementach.

Answer 2

To jest trudne.

Po uruchomieniu kodu Twój element nie ma klasy .date_picker_disabled, więc Twój jQuery(".date_picker_disabled") nic nie zwraca i .on() nie jest wywoływany.

Zastosować .on() na elemencie zewnętrznym i wykorzystanie parametru wyboru:

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

to przekaże zdarzenie do <outer element>. Program obsługi zostanie wykonany dopiero po kliknięciu elementu o klasie .date_picker_disabled (drugi parametr).

Answer 3

Z dokumentacji .live():

przepisywanie metodę .live() pod względem jego następców jest prosta; Są to szablony dla równoważnych wezwań do wszystkich metod mocowania trzy zdarzenia:

$(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+ 

Więc w twoim przypadku, zrobiłbyś:

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

Answer 4

Może powinieneś zrobić:

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

w ten sposób dołączasz obsługę zdarzeń do bosy i określasz, aby uruchamiać to zdarzenie tylko wtedy, gdy selektor ".date_picker_disabled" i s dopasowane.
BTW to jest dokładnie jak live() pracował

Answer 5

używałem jQuery 1.7.2 i próbowałem wszystkie proponowane metody:

nie działa:

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

nie działa:

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

Non e z nich działało, dopóki nie próbowałem:

----- Pracowałem! ----

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

Answer 6

try:

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

document.body pomaga dynamicznego html zbyt. Wystarczy chekc go: .on not working on dynamic html