Question

I am currently encountering a problem with PHP and jQuery.

I have build a website like this:

header.php – this is where all the css and js files are loaded.
index.php – main page.
sidemenu.php – this is the side menu, which is included in index.php

Inside sidemenu.php I have this JS code:

    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".more").live('click', function(){
        $(this).next(".submenu").slideToggle(500); });
    });
    </script>

Which should get the .more to slideToggle:

<div class="twocol" id="side-menu">

    <ul class="menu">
        <li>Dashboard</li>     
        <li class="more"><a href="#">Security Settings</a> <img src="images/dropdown-menu.png" align="right"></li>
            <ul class="submenu">
                <li>Blacklistings</li>
                <li>New Membership Package</li>  
            </ul>                        
        <li class="more"><a href="memberships.php">Memberships</a> <img src="images/dropdown-menu.png" align="right"></li>
            <ul class="submenu">
                <li>New Membership</li>
                <li>New Membership Package</li>  
            </ul>         
        <li>Forums</li>  
        <li>Help Desk</li>
        <li class="help">Documentation</li>    
    </ul>   

</div><!-- END 2col --> 

Yet, nothing happens when I click the .more.

Weird enough, if I just make a page with the source code of the three pages above, it works.

What am I doing wrong?

Thanks in advance.

Answer 1

Wich version of jQuery are you using? I found this on the jQuery website:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().