Question

I’m building a website which should change the content div with another content div from a page, via JQuery load function.
This works fine in Chrome only when it’s on a web server like wamp. If I open it in Chrome or IE, by clicking on the file, it just refreshes the page and nothing changes.
Here’s the code:

<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script> 
<script type="text/javascript">
      $(document).ready(function(){
          event.preventDefault();
        $("#menu-services").click(function(){
            event.preventDefault();
          $(".content").load('services.html .content-holder');
        });
      });
      </script>


 <div id="menu">
      <ul>
        <li><a id="menu-home" href="">Home</a></li>
        <li><a id="menu-services" href="">Services</a></li>
        <li><a id="menu-tour" href="">Tour</a></li>
        <li><a id="menulogin" href="">Login</a></li>
      </ul>
    </div> 
<!-- the content div -->
<div class="content">
  <div class="content-holder">
some html text
</div>
</div>

I tried inserting ‘return false;’ but still nothing happens.
Any ideas?

Answer 1

You’re calling event but you’re missing the variable in the function…Plus the first event.preventDefault() shouldn’t be there. What is it preventing? Also, what is the second one preventing? What’s #menu-services?

$(document).ready(function () {
    $("#menu-services").click(function (event) { // Look
        event.preventDefault();
        $(".content").load('services.html .content-holder');
    });
});

I suggest you take a look at http://api.jquery.com/event.preventDefault/. I think you might be using it wrong…