2014-08-28 76 views
0

采取这个sample as reference当菜单栏悬停时,它是一个菜单栏,当它在下拉菜单中有下拉菜单时,当我点击菜单它会在左边加载相同的菜单,在页面中间加载内容左边的菜单是一种有其他页面可见的标记......它与菜单页面中的子菜单相同....my问题是,为什么在左边的子菜单不可点击我试图警报在子菜单上的按钮点击,但它不会显示我的代码是这样由js函数加载的页面不能加载另一个页面使用js函数js html

这是在index.php

<body > 
<div id="header"> 
    <?php include ('pages/menupages.php'); ?> 
</div> 
<div id="body"> 
    <div id="bodycontainer" > 
     <table border="0" cellpadding="0" cellspacing="0"> 
      <tr style="vertical-align: top;"> 
       <td> 
        <div class="leftsidecolumn" id="leftcolumncontainer"> 

        </div> 
       </td> 
       <td id="middletd" style="vertical-align: top;"> 
        <div class="middlecolumn" id="middlecolumncontainer"> 
        </div> 
       </td> 
      </tr> 
     </table> 

    <div id="footer"> 
     <?php include ('pages/footer.php'); ?> 
    </div> 
</div> 
</body> 

顶部菜单的菜单

<div id="headermenu"> 
        <ul > 
         <li id=""><a href="#">home</a></li> 
         <li id=""><a href="#">product</a> 
          <ul class=""> 
           <li><a href="#">computer and other devices</a> 
            <ul> 
             <li id="desktop"><a href="#">desktop</a></li> 
             <li id="laptop"><a href="#">laptop</a></li> 
             <li id="phones"><a href="#">mobile phones</a></li> 
             <li id="consoles"><a href="#">consoles</a></li> 
            </ul> 
           </li> 
           <li><a href="#">submenu2</a> 
            <ul> 
             <li><a href="#">submenu.1</a></li> 
             <li><a href="#">submenu.2</a></li> 
             <li><a href="#">submenu.3</a></li> 
            </ul> 
           </li> 
           <li><a href="#">submenu3</a> 
            <ul> 
             <li><a href="#">submenu.1</a></li> 
             <li><a href="#">submenu.2</a></li> 
            </ul> 
           </li> 
           <li><a href="#">submenu4</a></li> 
           <li><a href="#">submenu5</a></li> 
           <li><a href="#">submenu6</a> 
            <ul> 
             <li><a href="#">submenu.1</a></li> 
             <li><a href="#">submenu.2</a></li> 
             <li><a href="#">submenu.3</a></li> 
            </ul> 
           </li> 
           <li><a href="#">submenu7</a></li> 
           <li><a href="#">submenu8</a> 
            <ul> 
             <li><a href="#">submenu.1</a></li> 
             <li><a href="#">submenu.2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li>   
         <li id=""><a href="#">menu3</a> 
          <ul> 
           <li><a href="#">submenu1</a> 
            <ul> 
             <li><a href="#">submenu.1</a></li> 
             <li><a href="#">submenu.2</a></li> 
            </ul> 
           </li> 
           <li><a href="#">submenu2</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 

计算机列表

<div id="sidemenucomputer" > 
     <div id="" class="leftnavigation headerimage"> 
     <img src="images/computer.png"/>  
      <ul class="leftnavigationlist"> 
             <li id="leftdesktop"><a href="#">desktop</a></li> 
             <li id="leftlaptop"><a href="#">laptop</a></li> 
             <li id="leftphones"><a href="#">mobile phones</a></li> 
             <li id="leftconsoles"><a href="#">consoles</a></li> 
      </ul> 
     </div> 
</div> 

THI是JS

$('#desktop').click(function() { 
        $('#middlecolumncontainer').load('pages/desktopcontent.php'); 
        $('#leftcolumncontainer').load('pages/computerlist.php'); 
       }); 



$('#leftdesktop').click(function() { 
        alert("desktop"); 
       }); 

当我点击桌面将加载在左侧和内容在中间的菜单列表content.now左列表菜单不点击,因为警报没有显示是不可能的,或者我做错了

+0

您的例子不符合您的代码示例。请向我们展示实际的代码,或使用jQuery线更新小提琴示例。 – 2014-08-28 02:29:29

+0

好吧,先生等我工作了一下 – Giant 2014-08-28 02:31:03

+0

请看看更新.. – Giant 2014-08-28 03:00:15

回答

2

更改代码:

$(document).on('click','#leftdesktop',function() { 
    alert("desktop"); 
}); 
+0

完美,但我有一个问题,你看我有多重菜单,如果我这样使用它我怎么做其他菜单...我需要('click.leftnavigationlist','。leftnavigationlist li> a'make'$(document).on' for each menu?thank you for fast response – Giant 2014-08-28 04:01:56

+0

like this $(document).off('click.leftnavigationlist')。on ,function(){alert(“desktop”);}); – 2014-08-31 06:10:19