JQuery не работает с динамически загруженным html

У меня есть веб-страница с тегами div в ней, которая динамически загружает содержимое строки меню/подкачки через jQuery (я хочу, чтобы содержимое было внешним, поэтому я могу загрузить его на нескольких страницах). На странице есть функция jQuery, которая изменяет содержимое строки меню, когда мышь находится над определенной частью строки меню (например, на странице msn.com).

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

Если я размещаю контент непосредственно на странице, он отлично работает. Любая помощь приветствуется, поскольку я не могу понять это.

HTML-контент, загружаемый динамически в каждый div

<div id="menubar_index">
 <!--menubar contents are loaded dynamically-->
 </div>

 


  
 <div id="menubar_sub">
 <!--menubar contents are loaded dynamically-->
 </div>

Содержимое HTML, загружаемое в первый div (menubar_index):

<div>

 <div id="wrapper">
 <div id="menuspacer">
  
 </div>
 <div id="dmsmenu">
 Document Management Solutions
 </div>
 <div id="lsTMFmenu">
 Life Science TMF Solutions
 </div>
 <div id="lssampmenu">
 Life Science Sampling Solutions
 </div>
 <div id="drsmenu">
 About DRS
 </div>
 </div> 

</div>

Содержимое HTML, загружаемое во второй div (menubar_sub):

<div>
 <div id="dmssubmenu">
 <a href="#" target="_blank">DMS Sub Menu</a>
 </div>
 <div id="lsTMFsubmenu">
 <a href="#" target="_blank">LSTMF Sub Menu</a>
 </div>
 <div id="lssampsubmenu">
 <a href="#" target="_blank">LSSamp Sub Menu</a>
 </div>
 <div id="drssubmenu">
 <a href="#" target="_blank">DRS Sub Menu</a>
 </div>
</div>

jQuery, который находится на странице:

CSS:

#wrapper {
 width: 1360px;
 margin: 0 auto;
 background-color:#0B0B3B;
}

#dmsmenu, #lsTMFmenu, #menuspacer, #lssampmenu, #drsmenu {

 float: left;
 min-height: 20px;
 color:White;
 border-spacing:2px;

}
#dmsmenu {
 width: 230px;
 text-align:center;
 font-weight:bold;

}

#lssampmenu {
 width: 230px;
 text-align:center;
 font-weight:bold;

}

#drsmenu {
 width: 130px;
 text-align:center;
 font-weight:bold;

}
#menuspacer {
 width: 50px;

}

#lsTMFmenu {
 width: 220px;
 text-align:center;
 font-weight:bold;

}

.topgradientblueline 
{
 background-color: #0A0A2A;
 width:1100px;
 height:20px; 
}
1 ответ

Чтобы обрабатывать любые делегированные события, вам нужно вызвать .on() над элементом document, вместо добавления в целевой селектор, который может отображаться в документе динамически.

поэтому измените это

$("#lsTMFmenu").on("mouseenter", function() {

в

$(document).on("mouseenter","#lsTMFmenu", function() {

таким образом, вы говорите, что все, что добавляется к элементу document с соответствующим селектором "#lsTMFmenu", присоединяет mouseenter вызов события mouseenter.

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

REF: http://api.jquery.com/on/

Счастливое кодирование :)

licensed under cc by-sa 3.0 with attribution.