Question

我有一个网页，里面有div标签，可以通过jQuery动态加载菜单栏/子栏内容（我希望内容是外部的，所以我可以将它加载到多个页面上）。在页面中，有一个jQuery函数，当鼠标位于菜单栏的特定部分（如msn.com上的那个部分）时，它会改变菜单栏内容。

问题是内容加载，但jQuery不起作用（使用.on()函数）。该功能的第一部分显示了一个子菜单，该子菜单基于您鼠标悬停在哪个菜单项上。函数的第二部分设置了鼠标覆盖菜单项的背景颜色，并将其他项的颜色设置回原始颜色。

如果我将内容直接放在页面上，它可以正常工作。任何帮助都表示赞赏，因为我无法理解这一点。

HTML - 动态加载到每个div中的内容

<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>

加载到第一个div（menubar_index）的HTML内容：

<div class="topgradientblueline">

    <div id="wrapper">
        <div id="menuspacer">
            &nbsp;
        </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>

加载到第二个div（menubar_sub）的HTML内容：

<div style="height:50px; width:950px;">
    <div id="dmssubmenu" style="display: none">
        <a href="#" style="text-decoration:none">DMS Sub Menu</a>
    </div>
    <div id="lsTMFsubmenu" style="display: none">
        <a href="#" style="text-decoration:none">LSTMF Sub Menu</a>
    </div>
    <div id="lssampsubmenu" style="display: none">
        <a href="#" style="text-decoration:none">LSSamp Sub Menu</a>
    </div>
    <div id="drssubmenu" style="display: none">
        <a href="#" style="text-decoration:none">DRS Sub Menu</a>
    </div>
</div>

驻留在页面上的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;        
}

Answer 1

要处理任何委托事件，您需要通过.on()元素调用document，而不是添加到目标选择器，这可能会动态显示在文档中。

所以改变这个

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

到

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

通过这种方式，您说要添加到具有相应选择器document的{{1}}元素的任何内容，请附加"#lsTMFmenu"事件回调。

您还需要在页面上为其他实例更改此内容。

<强> REF：http://api.jquery.com/on/

快乐编码：）

jQuery不能处理动态加载的html

1 个答案: