Меню

Datepicker не работает с динамически созданным div

JQuery DatePicker не работает на динамически создаваемых HTML

Я динамически создаю пару div с внутренними элементами управления. Два из этих элементов управления должны быть датпикерами. Но по какой-то причине они не отображаются (отображаются только входной текст) Он работает, если я создаю статический html, но не тогда, когда я использую динамический.

Это код, который я использую для генерации HTML (я могу видеть div)

Тогда в файле .js у меня есть это (я проверил и включил файл)

Почему датапикер не появляется? Благодарю! Гильермо.

8 ответов

Когда вы пишете

Этот фрагмент запускается сразу после загрузки страницы. Поэтому ваших динамических датпикеров еще нет. Вам нужно вызвать $(aSuitableSelector).datepicker(. ) для каждого вновь вставленного элемента. Во-первых, используйте var для хранения ваших опций:

Это позволяет вам писать

Вы также можете использовать возможность JQuery для прослушивать изменения DOM, чтобы избежать необходимости применять магию JS к вновь вставленным элементам — но я не думаю, что это стоит он.

Самый простой способ решить эту проблему — использовать плагин livequery:

Вместо того, чтобы применять datepickers ко всем объектам определенного класса, вы указываете LiveQuery применить его к этим объектам. LiveQuery, в свою очередь, будет продолжать применять datepicker, даже когда ваш DOM будет изменен позже.

Я не видел, чтобы производительность снижалась при использовании usnig, а изменения кода действительно минимальны (вам нужно добавить плагин на страницу и изменить только одну строку кода).

Вы бы использовали его так:

С этого момента каждый раз, когда вы добавляете объект с классом datepicker, плагин datepicker будет автоматически применен к нему.

Пожалуйста, добавьте ниже код после добавляемого элемента.

в файл DatePicker.js script, а затем добавили следующую строку в конце моей сгенерированной формы Ajax Html

Код, который привязывает datepickers, лучше всего выполнить сразу после того, как ваш html будет динамически создан. Если вы хотите сохранить код для инициализации datepicker в отдельном файле, я бы рекомендовал следующий подход: После того, как вы закончите генерировать свой html (я полагаю, он создан на готовом документе), используйте

И в файле datepicker вместо $(document).ready(function()<. >) используйте $(document).bind(«customHtmlGenerated», function()<. >);

Вероятно, это вопрос, в каком порядке запускается javascript. Попробуйте поставить

После вашего javascript, который создает html.

Код jQuery выполняется, когда документ готов: это означает, что начальная разметка вашей страницы будет готова, а не после того, как ваши файлы javascript будут работать.

Я предполагаю, что ваш код для инициализации datepickers запускает до вашего script, создавая элементы, поэтому ничего не происходит.

Попробуйте выполнить код jquery при загрузке страницы с помощью . load() вместо .ready(). Событие загрузки запускается при загрузке всех активов (js, image. ).

Вы также можете просто использовать способ javascript. Скрипты выполняются в том порядке, в котором они выполняются на странице. Таким образом, вы могли:

  • переместите свои скрипты прямо перед тегом закрывающего тега « `
  • убедитесь, что ваш первый script (создающий элементы) предшествует коду datepicker
  • удалите обработчик .ready() для выбора даты. Когда вы поместите свой script в конце, они неявно запускаются, когда DOM готов.
Читайте также:  Не работает подсчет шагов

Источник

Как заставить JQuery DatePicker работать после динамической загрузки в частичном представлении?

Я потерял функцию jqery datepicker в этом сценарии.

1 Первоначально у меня был нормальный вид, который отлично работал, имея этот код для ввода даты.

2- Затем я преобразовал этот вид в частичное представление, которое динамически загружается с помощью.

3- Частичный просмотр загружается нормально, данные могут быть (вручную) введены и все в порядке. Единственная проблема заключается в том, что jquery datepicker больше не работает. Я попытался назначить его после загрузки, используя это.

Это не сработало.

4 Позже я узнал, что jquery предоставляет функции live() и delegate(), которые могут прикрепить код javascript к загруженным элементам «сейчас и в будущем». Итак, я попробовал это в инициализации документа.

ни один из них не работал, возможно, потому, что они напрямую ссылаются на событие «click», но датапикер «прикреплен» (если это правильный термин) ко всему элементу.

Итак, вопрос: Как заставить jquery datepicker работать с элементами, загруженными после динамической загрузки?

Спасибо за ваше время!

РЕШИТЬ: Проблема заключалась в том, что внизу _Layout.cshtml есть эта строка.

. который загружает мини-версию jQuery-библиотек (уже упоминаемых мной). Таким образом, библиотеки загружались дважды и становились недействительными, создавая ошибку «datepicker() не является функцией».

Просто комментируя или удаляя эту строку, все работает нормально!

Источник

JQuery DatePicker не работает на динамически создаваемых HTML

Я динамически создаю пару div с внутренним контролем. Два из этих элементов управления должны быть DatePickers. Но по какой-то причине они не отображаются (отображается только входной текст). Это работает, если я создаю статический HTML, но не когда я использую динамический.

Это код, который я использую для генерации HTML (я вижу div)

Затем в файле .js у меня есть это (я проверил, и я включаю файл)

Почему указатель даты не появляется?

11 ответов

Когда ты пишешь

Этот фрагмент выполняется сразу после загрузки страницы. Таким образом, ваши динамические датеры еще не там. Вам нужно вызывать $(aSuitableSelector).datepicker(. ) для каждого вновь вставленного элемента. Во-первых, используйте переменную для хранения ваших опций:

Это позволяет вам писать

Вы также можете использовать способность JQuery для прослушивания изменений DOM, чтобы избежать необходимости применять JS волшебство для недавно вставленных элементов — но я не думаю, что оно того стоит.

Код, который связывает указатели даты, лучше всего выполнять сразу после динамического создания html. Если вы хотите сохранить код для инициализации datepicker в отдельном файле, я бы порекомендовал следующий подход: после того, как вы закончите генерировать HTML (я предполагаю, что он сгенерирован на документе готово), используйте

И в файле выбора даты вместо $(document).ready(function()<. >) используйте $(document).bind(«customHtmlGenerated», function()<. >);

Самый простой способ, который я нашел, чтобы решить эту проблему, это использовать плагин livequery:

Читайте также:  Не работает эван warmos

Вместо того, чтобы применять указатели даты ко всем объектам определенного класса, вы указываете LiveQuery применить его к этим объектам. В свою очередь, LiveQuery продолжит применять средство выбора даты, даже если впоследствии DOM изменится.

Я не видел никаких падений производительности при использовании этого, и изменения кода действительно минимальны (вам нужно добавить плагин на страницу и изменить только одну строку кода).

Вы бы использовали это так:

С тех пор каждый раз, когда вы добавляете объект с классом datepicker, к нему автоматически применяется плагин datepicker.

В файл сценария DatePicker.js, а затем добавил следующую строку в конце моей сгенерированной формы Ajax Html

Пожалуйста, добавьте ниже код после добавления элемента.

Код jQuery выполняется, когда документ готов: это означает, что начальная разметка вашей страницы готова, а не после запуска ваших файлов javascript.

Я предполагаю, что ваш код для инициализации DatePickers запускается до вашего скрипта, создающего элементы, поэтому ничего не происходит.

Попробуйте выполнить код jquery, когда страница загружена, используя .load () вместо .ready ( ) . Событие load вызывается, когда загружены все ресурсы (js, image . ).

Вы также можете просто использовать способ выполнения JavaScript. Скрипты выполняются в порядке их появления на странице. Чтобы вы могли:

  • переместите свои скрипты прямо перед закрывающим тегом тела « `
  • убедитесь, что ваш первый скрипт (создание элементов) идет перед кодом datepicker
  • удалите обработчик .ready () для средства выбора даты. Когда вы помещаете ваш скрипт в конец, он неявно запускается, когда DOM готов .

Вероятно, дело в том, в каком порядке запускается JavaScript. Попробуйте положить

После вашего JavaScript, который создает HTML.

Я решил для динамически созданного элемента ввода с этим: —

Я нашел самый простой способ добавить средство выбора даты для динамически добавляемого поля ввода:

Источник

JQuery DatePicker не работает в добавленном div

У меня есть форма (4 входа), включая JQuery DatePicker. Он также имеет кнопку, которая добавляет еще один div (также через jQuery, те же 4 входа) ниже, так что пользователь может добавить несколько записей .. DatePicker работает в первой форме, но не любые последующие .

2 ответа

Вы захотите «сказать» jQuery, чтобы динамически обрабатывать событие DOM для ваших целевых элементов и перепривязывать эту функцию выбора даты. Начните с добавления класса css к любому из ваших элементов выбора даты, например «my-datepicker». Затем скажите DOM связать функциональность datepicker с событием (например, mousenter):

Выше будет сказано DOM отвечать на любое событие mouseenter для элементов с классом «my-datepicker», которые расположены внутри элемента с идентификатором «myForm», — и это добавит функциональность datepicker к этому элементу.

Я также заметил, что у вас есть некоторая избыточность в вашем скрипте, строки:

Делайте то же самое, но они вложены друг в друга. Я не уверен, если это вызовет у вас проблемы или нет, но я бы использовал только один или другой.

Обратите внимание, вы также можете использовать jQuery.live () или jQuery.on () в зависимости от того, какую версию jQuery вы используете. .delegate () работает для 1.4.3+ и .on () для 1.7+

Самый простой способ — снова вызвать datepicker() недавно созданное поле даты в конце $(‘#btnAdd’).click . Также есть похожие вопросы с более правильными решениями: Почему средство выбора даты в jQuery UI не работает с динамическим DOM?.

Читайте также:  Сломался дверной звонок как починить

Источник

установка datepicker () на динамически создаваемые элементы — JQuery / JQueryUI

Я динамически создавал текстовые поля и хочу, чтобы каждое из них могло отображать календарь при нажатии. Код, который я использую:

Который будет работать только в первом текстовом поле, даже если все мои текстовые поля имеют класс datepicker_recurring_start.

Ваша помощь очень ценится!

12 ответов

Синтаксис $(‘. selector..’).on(‘..event..’, ‘. another-selector. ‘, . callback. ); означает:
Добавьте слушателя в . selector.. (в нашем примере body ) для события ..event.. (в нашем примере — ‘focus’). Для всех потомков соответствующих узлов, которые соответствуют селектору . another-selector. ( .datepicker_recurring_start в нашем примере), примените обработчик событий . callback. (встроенная функция в нашем примере)

См. http://api.jquery.com/on/ и особенно раздел о «делегированных событиях»

Это то, что у меня работало на JQuery 1.3 и показывается по первому клику / фокусу

Для этого необходимо, чтобы ваш вход имел класс «mostrar_calendario»

Live для JQuery 1.3+ для более новых версий, вам нужно адаптировать это к «on»

Подробнее о разнице читайте здесь http://api.jquery.com/live/

Я изменил ответ @skafandri, чтобы избежать повторного применения конструктора datepicker ко всем входам с классом .datepicker_recurring_start .

Ни одно из других решений не помогло мне. В моем приложении я добавляю элементы диапазона дат в документ, используя jquery, а затем применяю к ним средство выбора даты. Так что ни одно из решений событий не сработало по какой-то причине.

Вот что в итоге сработало:

Надеюсь, что это кому-то поможет, потому что это немного отбросило меня.

У меня ниже работает jquery:

Изменение «тела» на документ

Примечание: убедитесь, что ваш идентификатор отличается для каждого поля

Отличный ответ от скафандри +1

Это просто обновлено, чтобы проверить класс hasDatepicker.

Вот что сработало для меня (с помощью jquery datepicker):

Новый метод для динамических элементов — это MutationsObserver.. Следующий пример использует underscore.js для использования (_.each) функции.

Убедитесь, что ваш элемент с классом .date-picker НЕ имеет класса hasDatepicker . Если это произойдет, даже попытка повторной инициализации с $myDatepicker.datepicker(); потерпит неудачу! Вместо этого вам нужно сделать .

Вам нужно снова запустить .datepicker(); после того, как вы динамически создали другие элементы текстового поля.

Я бы рекомендовал сделать это в методе обратного вызова, который добавляет элементы в DOM.

Допустим, вы используете метод Load JQuery для извлечения элементов из источника и загрузки их в DOM, вы должны сделать что-то вроде этого:

Вы можете добавить класс .datepicker в функцию javascript, чтобы иметь возможность динамически изменять тип ввода

Источник

Adblock
detector