Home/ Questions/Q 9060987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:22:20+00:00

I have this code in my html page: <body> <div align=center> <a href=../index.html> <img

  • 0

I have this code in my html page:

    <body>
    <div align="center">
      <a href="../index.html">
      <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base">    </a>

      <div style="background-image:url(Heading%20Background.jpg); width:800px">
      <a href="../index.html" style="position:relative; left:-130px">HOME</a>
      <a href="" style="position:relative; left:-65px" id="planning">PLANNING</a>   
    </div>
    ...
    ...
    ...
    </body>

The hyperlink HOME is linked to index.html page which is located in the root folder of the folder containg this html page. But nothing happens once clicking this hyperlink. Even the banner which is linked to the same page doesn’t work.

The strange thing is, both these hyperlinks were working fine before, till I made some “jquery” code changes in my page. But I’m not sure how the change is affecting this. Kindly help.
These are the code changes made from:

    <script> 
    $(document).ready(function(){
      $("#planning").click(function(e){
        $("#planning_panel").slideToggle("slow");
        e.preventDefault()
       });
     });
    </script>

to:

    <script> 
    $(document).ready(function() {
     $(document).on('click',function(e) {
  e.preventDefault();
   var $panel = $("#planning_panel");
   if (e.target.id === 'planning') {
     $panel.slideToggle('slow');
   } else {
     $panel.slideUp('slow');
   }

        });
      });
     </script>

Both the scripts are working fine, the only problem is as soon the changes were made the hyperlinks stopped working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This new code:

    $(document).ready(function() {
  $(document).on('click',function(e) {
     e.preventDefault();
     // ...
   });
});

    …tells the browser that when a click occurs that bubbles up to the document (as most clicks eventually do, unless you call stopPropagation from a handler deeper down), the browser should prevent the default action. The default action of a click on a link is to follow the link.

    The solution is to only call e.preventDefault(); when you want to prevent the action of the click. Here’s how I’d probably recast that code:

    $(document).ready(function() {
  $(document).on('click',function(e) {
    var $panel = $("#planning_panel");
    if ($(e.target).closest("#planning")[0]) {
      // Click is on the planning link, toggle the panel and prevent the default
      $panel.slideToggle('slow');
      e.preventDefault();
    } else {
      // Not on the planning link, slide the panel up
      $panel.slideUp('slow');
    }
  });
});

    Live Example | Source (I’ve changed ../index.html to http://stackoverflow.com on the HOME link, but other than that the only change is the code)

    There we’re only preventing the default action of the click if it’s on the #planning link.

    Side note: I’ve used closest instead of checking e.target.id because it’s more robust. It’s not strictly necessary with your markup, but if you ever changed the markup slightly (adding a span or em or something), you’d need it, so it’s good for robustness.

    • 0