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.
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().