Динамический контент и загрузка скриптов JQuery несколько раз - PullRequest
2 голосов
/ 02 сентября 2011

У меня есть страница, которая загружает контент динамически.В зависимости от того, какой пункт меню щелкает пользователь, различные таблицы динамически загружаются и представляются с использованием jquery.

В одном столбце каждой таблицы есть строка обновления, используемая для обновления содержимого, которое представляет конкретная строка.При щелчке по этой ссылке в модальном диалоговом окне пользовательского интерфейса JQuery отображается форма, загруженная с сервера, на которой пользователь должен обновить содержимое и отправить обратно.

Вот как я понимаю, пожалуйста, поправьте меня, если я ошибаюсь.Мне нужно загрузить скрипт jquery одновременно с загрузкой динамического контента, чтобы связать события между функциями javascript и загружаемыми элементами.

Предполагая, что мои предположения верны, я загружаю содержимое и одни и те же сценарии JQuery UI Dialog каждый раз, когда пользователь выбирает другую таблицу.Я загружаю контент и файлы jquery из разных функций javascript, загружаемых вместе с основным индексным файлом.

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

Может быть проблема в том, что скрипт jquery загружается более одного раза?Если да, то какой принцип или шаблон я должен использовать для такого рода приложений.Если все вышеизложенное является ложным предположением, тем не менее, каков принцип или шаблоны для разработки такого рода решения, когда разные виды динамического контента загружаются в нескольких местах (все представлены в одном и том же индексном файле) и все нуждаются в одинаковых файлах jquery.

Ответы [ 3 ]

4 голосов
/ 02 сентября 2011

Посмотрите jQuery $ .live () и $ .delegate ():

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Это позволит вам связатьсобытия динамически загружаемого контента.

3 голосов
/ 02 сентября 2011

Если я вас правильно понимаю, вы спрашиваете, как связать события с динамически генерируемым контентом.Фактически вам не нужно загружать новый сценарий одновременно с новым содержимым, чтобы иметь возможность привязывать события к указанному содержимому.

Что вам нужно, так это jQuery 'live' обработчик.Вы можете указать цель привязки, используя стандартные селекторы jQuery.Однако вместо следующего синтаксиса:

$('.foo').click(function(){ });

Вы бы использовали

$('.foo').live('click', (function(){ });

. Это работает посредством всплытия событий, когда событие вызывается для дочернего элемента (такого какполе ввода) «пузыри» через все родительские узлы.В этом случае jQuery просто просматривает весь документ на наличие пузырьков событий, а затем сопоставляет его с вашими конкретными условиями выбора.

1 голос
/ 02 сентября 2011

Если я вас правильно понимаю:

1) Несколько таблиц со ссылкой обновления в каждой строке для обновления их содержимого.

2) Кнопка обновления открывает модальное поле с формой.

3) Форма публикуется и данные извлекаются после обработки сервером для подачи в соответствующую строку таблицы.

Если описанный выше поток правилен, я не понимаю, зачем вам загружатьJQuery или JQuery UI более одного раза.

Вы должны сделать что-то вроде

1) Загрузите страницу со всеми необходимыми сценариями.

2) Настройка и вызов ajax сметод jquery .ajax () ( doc )

3) Используйте вызов ajax для отправки данных формы на сервер и получения результатов

4) Используйтеуспешный обратный вызов .ajax () для подачи строки с обновленными данными.В рамках метода успеха вы должны быть в состоянии извлечь контекст (он же ссылка, по которой вы щелкнули) и определить фактическую строку, по которой вы щелкнули.

Надеюсь, что имеет смысл.

Если случайно вынеобходимо создать новые строки, тогда вам следует рассмотреть возможность проверки методов .live () и .delegate () в jQuery.

Удачи.

...