-2
jQuery를 통해 메뉴 막대/하위 막대 내용을 동적으로로드하는 div 태그가있는 웹 페이지가 있습니다 (여러 페이지에로드 할 수 있도록 외부 컨텐츠를 원합니다). 이 페이지에는 마우스가 메뉴 막대의 특정 부분 (예 : msn.com)에있을 때 메뉴 막대 내용을 변경하는 jQuery 함수가 있습니다.동적으로로드 된 html에 jQuery가 작동하지 않습니다.
문제는 콘텐츠가로드되지만 jQuery가 작동하지 않습니다 (.on() 함수 사용). 함수의 첫 번째 부분에는 사용자가 마우스로 가리키는 메뉴 항목을 기반으로하는 하위 메뉴가 표시됩니다. 함수의 두 번째 부분은 마우스 오버 메뉴 항목의 배경색을 설정하고 다른 항목의 색상을 원본으로 다시 설정합니다.
페이지에 콘텐츠를 직접 입력하면 정상적으로 작동합니다. 이 문제를 이해할 수 없으므로 도움을 주시면 감사하겠습니다.
HTML - 내용은 각 사업부에 동적으로로드
<tr>
<td align="center" valign="middle">
<div id="menubar_index">
<!--menubar contents are loaded dynamically-->
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div id="menubar_sub">
<!--menubar contents are loaded dynamically-->
</div>
</td>
</tr>
HTML 내용 :
<div class="topgradientblueline">
<div id="wrapper">
<div id="menuspacer">
</div>
<div id="dmsmenu" style="font-family:Sans-Serif; font-size:small; ">
Document Management Solutions
</div>
<div id="lsTMFmenu" style="font-family:Sans-Serif; font-size:small; ">
Life Science TMF Solutions
</div>
<div id="lssampmenu" style="font-family:Sans-Serif; font-size:small; ">
Life Science Sampling Solutions
</div>
<div id="drsmenu" style="font-family:Sans-Serif; font-size:small; ">
About DRS
</div>
</div>
</div>
HTML의 함유량에로드 두 번째 div (menubar_sub) :
페이지에있는 123,165,jQuery를 :
<script type="text/javascript">
$(document).ready(function(){
$("#menubar_index").load("menubar_index.html");
$("#menubar_sub").load("menubar_sub.html");
$("#menubar_ims").load("menubar_ims.html");
$("#pageheader").load("page_header.html");
$("#footer_news").load("footer_news.html");
$("#vmenubar_ims").load("vmenubar_ims.html");
$("#vmenubar_tmfps").load("vmenubar_tmfps.html");
$("#pagefooter").load("page_footer.html");
});
//jquery to show & hide divs
$(document).ready(function() {
// doc mgmt slns menu item
$("#dmsmenu").on("mouseenter", function() {
// hide/show sub menus
$("#dmssubmenu").show();
$("#lsTMFsubmenu").hide();
$("#lssampsubmenu").hide();
$("#drssubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff')
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background(blue), text(white) of all other menu items
$("#lsTMFmenu").css('background', '#0A0A2A');
$("#lsTMFmenu").css('color', '#ffffff');
$("#lssampmenu").css('background', '#0A0A2A');
$("#lssampmenu").css('color', '#ffffff');
$("#drsmenu").css('background', '#0A0A2A');
$("#drsmenu").css('color', '#ffffff');
});
// life sci TMF slns menu item
$("#lsTMFmenu").on("mouseenter", function() {
// hide/show sub menus
$("#lsTMFsubmenu").show();
$("#dmssubmenu").hide();
$("#lssampsubmenu").hide();
$("#drssubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff');
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background(blue), text(white) of all other menu items
$("#dmsmenu").css('background', '#0A0A2A');
$("#dmsmenu").css('color', '#ffffff');
$("#lssampmenu").css('background', '#0A0A2A');
$("#lssampmenu").css('color', '#ffffff');
$("#drsmenu").css('background', '#0A0A2A');
$("#drsmenu").css('color', '#ffffff');
});
// life sci samp slns menu item
$("#lssampmenu").on("mouseenter", function() {
// hide/show sub menus
$("#lssampsubmenu").show();
$("#dmssubmenu").hide();
$("#lsTMFsubmenu").hide();
$("#drssubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff')
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background/text of other menu items back to normal
$("#lsTMFmenu").css('background', '#0A0A2A');
$("#lsTMFmenu").css('color', '#ffffff');
$("#dmsmenu").css('background', '#0A0A2A');
$("#dmsmenu").css('color', '#ffffff');
$("#drsmenu").css('background', '#0A0A2A');
$("#drsmenu").css('color', '#ffffff');
});
// about DRS menu item
$("#drsmenu").on("mouseenter", function() {
// hide/show sub menus
$("#drssubmenu").show();
$("#dmssubmenu").hide();
$("#lsTMFsubmenu").hide();
$("#lssampsubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff')
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background/text of other menu items back to normal
$("#lsTMFmenu").css('background', '#0A0A2A');
$("#lsTMFmenu").css('color', '#ffffff');
$("#dmsmenu").css('background', '#0A0A2A');
$("#dmsmenu").css('color', '#ffffff');
$("#lssampmenu").css('background', '#0A0A2A');
$("#lssampmenu").css('color', '#ffffff');
});
});
</script>
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;
}
사용 $ (문서) CSTE 연구진에게 ("mouseenter", "# lsTMFmenu"함수() { –
을 어떤 노력, 이런 종류의 질문을 표시 해피 한 달에 백번을 부탁합니다 ... –
$ (문서) .ready를 .on으로 변경했으며 Anoop의 매력처럼 작동했습니다. 빠른 응답 주셔서 감사합니다. – Phil