JavaScript не работает над динамическим контентом -- javascript поле с участием jquery поле с участием html поле с участием dynamic пол Связанный проблема

JavaScript not working on dynamic content


1
vote

проблема

русский

У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются к динамическому контенту (например, Mouseover Animate и т. Д.). Я пытался сделать это работать уже несколько часов, но это просто не будет работать. Нет ошибок JS в инструментах разработчика Chrome. Кто-нибудь может помочь?

Например на JavaScript страницы родительской страницы:

 <код> jQuery("ul#nav li.page a").on('mouseover', '.item', function () {     jQuery(this).stop(true, true).animate({         backgroundPosition: "(0 0)"     }, 500);     jQuery(this).animate({         backgroundPosition: "(0 -35px)"     }, 750); }, function () {     jQuery(this).animate({         backgroundPosition: "(0 -120px)"     }, 750) });   

и страница «детская», где HTML загружен из

 <код> <li class="page"><a href="home" style="margin:0 22px 0 0" class="item">Home</a></li> <li class="page"><a href="about" class="item">About Us</a></li> <li class="page"><a href="store" class="item">Store</a></li> <li class="page"><a href="news" class="item">News</a></li> <li class="page"><a href="contact" style="margin:0 0 0 22px" class="item">Contact</a></li>   

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

Английский оригинал

I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?

For example on the parent page's javascript I have:

jQuery("ul#nav li.page a").on('mouseover', '.item', function () {     jQuery(this).stop(true, true).animate({         backgroundPosition: "(0 0)"     }, 500);     jQuery(this).animate({         backgroundPosition: "(0 -35px)"     }, 750); }, function () {     jQuery(this).animate({         backgroundPosition: "(0 -120px)"     }, 750) }); 

and the 'child' page where HTML is loaded from

<li class="page"><a href="home" style="margin:0 22px 0 0" class="item">Home</a></li> <li class="page"><a href="about" class="item">About Us</a></li> <li class="page"><a href="store" class="item">Store</a></li> <li class="page"><a href="news" class="item">News</a></li> <li class="page"><a href="contact" style="margin:0 0 0 22px" class="item">Contact</a></li> 

Your help would be greatly appreciated!

</div
           
         
         

Список ответов

3
 
vote
vote
Лучший ответ
 

Попробуйте использовать метод «делегата» вместо «на».

 <код> exec /usr/bin/ssh -o User=user1 -o IdentityFile=/path/to/ssh/key -o HostName=repo.com -o StrictHostKeyChecking=no -o UserKnownHostsFile=/path/to/knownhosts -p <port> repo.com git-receive-pack '/repo/path' 2  
 

try using 'delegate' method instead of 'on'.

jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {     jQuery(this).stop(true, true).animate({         backgroundPosition: "(0 0)"     }, 500);     jQuery(this).animate({         backgroundPosition: "(0 -35px)"     }, 750); }, function () {     jQuery(this).animate({         backgroundPosition: "(0 -120px)"     }, 750) }); 
</div
 
 
 
 
2
 
vote

Если вы хотите приложить .on Action к динамическому элементу, вы вместо этого прикрепляете его к $ (документу). И когда новые элементы загружаются, действие уже есть.

 <код> exec /usr/bin/ssh -o User=user1 -o IdentityFile=/path/to/ssh/key -o HostName=repo.com -o StrictHostKeyChecking=no -o UserKnownHostsFile=/path/to/knownhosts -p <port> repo.com git-receive-pack '/repo/path' 3  
 

if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead. and when the new elements are loaded the action is already there.

jQuery(document).on('mouseover', 'ul#nav li.page a', function () {     jQuery(this).stop(true, true).animate({         backgroundPosition: "(0 0)"     }, 500);     jQuery(this).animate({         backgroundPosition: "(0 -35px)"     }, 750); }, function () {     jQuery(this).animate({         backgroundPosition: "(0 -120px)"     }, 750) }); 
</div
 
 
0
 
vote

Попробуйте использовать:

 <код> exec /usr/bin/ssh -o User=user1 -o IdentityFile=/path/to/ssh/key -o HostName=repo.com -o StrictHostKeyChecking=no -o UserKnownHostsFile=/path/to/knownhosts -p <port> repo.com git-receive-pack '/repo/path' 4  
 

try using:

jQuery("ul#nav li.page a").on('mouseover', '.item', function () {     jQuery(this).stop().animate({         backgroundPosition: "(0 -35px)"     }, 750); }, function () {     jQuery(this).stop().animate({         backgroundPosition: "(0 -120px)"     }, 750) }); 
</div
 
 

Связанный проблема

0  Кнопка CKeditor 4 Не отображается  ( Ckeditor 4 underline button not showing ) 
Это мой код JavaScript для конфигурации моего CKEDITOR. Я нахожу на браузере для этого решения, но я не могу найти никакого решения даже на официальном сайте ...

0  Почему Autoseizecolumn () Loop, похоже, замораживает сценарий Google Apps?  ( Why does an autoresizecolumn loop seem to freeze a google apps script ) 
Все, что я пытаюсь сделать, это изменить размер всеми колонны в электронной таблице. Это автономная электронная таблица. Я использую: <код> function format(...

0  Новое развитие приложений с использованием Cordova и Ionic  ( Native app development using cordova and ionic ) 
Как сохранить процесс или сервис всегда запущены даже после того, как приложение будет убито пользователем, похожее на секундомер, который будет запущен даже ...

1  JavaScript: Получение идентификатора родителя из документа  ( Javascript getting the id of the parent from a document ) 
У меня возникли проблемы с тем, чтобы получить идентификатор родителя документа, который здесь «iFrame1». Как вы можете видеть, что JavaScript должен проживат...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

59  Дисплей Div в положении курсора в Textarea [дубликат]  ( Display div at cursor position in textarea ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Отображать имя страницы в JavaScript?  ( Display page name in javascript ) 
Как бы я добавил <код> location.href.split('/').pop() к документу HTML для отображения имени страницы? (Не весь URL) я хотел бы отобразить только имя страниц...

0  Google Map не отображает  ( Google map not displaying ) 
У меня есть карта Google, которая используется здесь: http://www.comehike.com/outdoors/birds/birds.php Теперь я вижу сообщения об ошибках .j для 1) Инициа...

4  Является ли хорошей идеей использовать условные зависимости в модулях AMD?  ( Is it a good idea to use conditional dependencies in amd modules ) 
Я думаю об использовании условий для указания модуля зависит в модульной системе AMD. Например, чтобы загрузить библиотеку на браузере и библиотеку на сервере...

0  OnClick = "Commentcheck ({{Meeting.people}})", ожидаемый идентификатор, строка или номер  ( Onclick authoritycheckmeeting people expected identifier string or num ) 
У меня возникли проблемы с отправкой <код> {{meeting.people}} Value на функцию JS. Код подписан на Сообщение об ошибке говорит: ожидаемый идентификатор, ст...

0  Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3  ( Update drag scroll origin after an update of the data with transition in d3 ) 
Я работаю на диаграмме с перетаскиванием, масштабированием и обновлениями. Это в основном работает, однако, после добавления новых данных позиция перетаскиван...

1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp  ( Rapidmail subscription form redirect after email subscription mailchimp ) 
Я создаю веб-страницу, которая включает в себя очень простую форму подписки, в основном собирая адреса электронной почты, заинтересованные в продукте. Для это...

0  JavaScript Ball Collision  ( Javascript ball collision ) 
Я пытаюсь создать простую игру JavaScript с простыми физиками. Я могу определить, когда 2 шарика столкнулись, но у меня возникли проблемы с обработкой столкно...

2  Fullcalendar сейчас () индикатор позиционируется неправильно  ( Fullcalendar now indicator positioned wrongly ) 
в Fullcalendar, при настройке параметров Mintime и maxtime ныне () индикаторы не расположены должным образом. У меня есть jsfiddle , чтобы пока...

30  Как я могу использовать Nodejs с Windows 7? [закрыто]  ( How can i use nodejs with windows 7 ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> <Путь d = "M15 6.38A6.48 6.48 0 007.78. 04H-.02A6.49 6.49 0 002.05 ...

Связанный проблема

0  Кнопка CKeditor 4 Не отображается 
0  Почему Autoseizecolumn () Loop, похоже, замораживает сценарий Google Apps? 
0  Новое развитие приложений с использованием Cordova и Ionic 
1  JavaScript: Получение идентификатора родителя из документа 
0  .append () элемент с более чем одним классом 
59  Дисплей Div в положении курсора в Textarea [дубликат] 
0  Отображать имя страницы в JavaScript? 
0  Google Map не отображает 
4  Является ли хорошей идеей использовать условные зависимости в модулях AMD? 
0  OnClick = "Commentcheck ({{Meeting.people}})", ожидаемый идентификатор, строка или номер 
0  Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3 
1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp 
0  JavaScript Ball Collision 
2  Fullcalendar сейчас () индикатор позиционируется неправильно 
30  Как я могу использовать Nodejs с Windows 7? [закрыто]