Mam dynamicznie utworzone pola tekstowe i chcę, aby każde z nich mogło wyświetlać kalendarz po kliknięciu. Kod, którego używam to:
$(".datepicker_recurring_start" ).datepicker();
Co będzie działać tylko na pierwszym polu tekstowym, mimo że wszystkie moje pola tekstowe mają klasę o nazwie datepicker_recurring_start.
Twoja pomoc jest bardzo ceniona!
javascript
jquery
jquery-ui
datepicker
przesiąknięty
źródło
źródło
Odpowiedzi:
oto sztuczka:
PRÓBNY
Te
$('...selector..').on('..event..', '...another-selector...', ...callback...);
środki składniowe:Dodawanie słuchacza
...selector..
(thebody
w naszym przykładzie) za zdarzenie..event..
( „FOCUS” w naszym przykładzie). Dla wszystkich potomków pasujących węzłów, które pasują do selektora...another-selector...
(.datepicker_recurring_start
w naszym przykładzie), zastosuj procedurę obsługi zdarzeń...callback...
(funkcję wbudowaną w naszym przykładzie)Zobacz http://api.jquery.com/on/, a zwłaszcza sekcję o „wydarzeniach delegowanych”
źródło
.datapicker()
każdym razem, gdy pole tekstowe nabiera ostrości - więc chciałbyś zachować ostrożność przy tym podejściu (zakładając, że dobrze to czytam). Jednak myślę, że nie.datapicker()
przeszkadzałoby ci to, ponieważ prawdopodobnie sprawdzi, czy datapicker jest utworzony przed próbą ponownego utworzenia. Z innym kodem możesz nie mieć tej łaski. Ponadto .on (jest wprowadzony tylko w JQuery 1.7 - więc upewnij się, że używasz poprawnej wersji.:not(.hasDatepicker)
U mnie poniżej działało jquery:
zmiana „treści” na dokument
Dzięki skafandri
Uwaga: upewnij się, że Twój identyfikator jest inny dla każdego pola
źródło
Doskonała odpowiedź od skafandri +1
Zostało to właśnie zaktualizowane, aby sprawdzić klasę hasDatepicker.
źródło
$('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});
?Upewnij się, że Twój element z
.date-picker
klasą NIE ma jużhasDatepicker
klasy. Jeśli tak się stanie, nawet próba ponownej inicjalizacji za pomocą programu$myDatepicker.datepicker();
zakończy się niepowodzeniem! Zamiast tego musisz zrobić ...źródło
Musisz uruchomić
.datepicker();
ponownie po dynamicznym utworzeniu innych elementów pola tekstowego.Poleciłbym to zrobić w metodzie wywołania zwrotnego wywołania, czyli dodaniu elementów do DOM.
Powiedzmy, że używasz metody JQuery Load do ściągnięcia elementów ze źródła i załadowania ich do DOM, zrobiłbyś coś takiego:
źródło
Nowa metoda dla elementów dynamicznych to MutationsObserver .. W poniższym przykładzie użyto znaku podkreślenia.js do użycia funkcji (_.each).
źródło
Oto, co zadziałało dla mnie (używając jquery datepicker):
źródło
Żadne z innych rozwiązań nie działało dla mnie. W mojej aplikacji dodaję elementy zakresu dat do dokumentu za pomocą jQuery, a następnie stosuję do nich DatePicker. Więc żadne z rozwiązań eventowych nie działało z jakiegoś powodu.
Oto, co w końcu zadziałało:
Mam nadzieję, że to komuś pomoże, ponieważ trochę mnie cofnęło.
źródło
możesz dodać klasę .datepicker do funkcji javascript, aby móc dynamicznie zmieniać typ danych wejściowych
źródło
Zmodyfikowałem odpowiedź @skafandri, aby uniknąć ponownego zastosowania
datepicker
konstruktora do wszystkich danych wejściowych z.datepicker_recurring_start
klasą.Oto kod HTML:
Oto JS:
oto działające demo
źródło
To właśnie zadziałało dla mnie w JQuery 1.3 i jest widoczne przy pierwszym kliknięciu / fokusie
wymaga to, aby twoje dane wejściowe miały klasę „mostrar_calendario”
Live jest dla JQuery 1.3+ dla nowszych wersji, musisz dostosować to do „on”
Zobacz więcej o różnicy tutaj http://api.jquery.com/live/
źródło
źródło