title: How to use jQuery "onClick" hook and event.preventDefault();
body: <p>I am trying to navigate to a div tag, by id, on a webpage without the page automatically scrolling to the div.  Here is what I have:</p>
  
  <pre><code>&lt;a id="submission" href='#Home' class="bannerLink"&gt;Home&lt;/a&gt;
  </code></pre>
  
  <p>I have a jQuery script: <code>behaviour.js</code> imported in the head of the HTML file, the alert box appears so I know it enters the function.</p>
  
  <p>In this script I have:</p>
  
  <pre><code>$(function(){
      $("#submission").on("click", function(event){
          alert('HI');
          event.preventDefault();
          submitComment();
      });
  });
  </code></pre>
  
  <p>I have added an onClick event to the HTML source, naming a specific function to execute which works, as I have put an alert in there, but the <code>event.preventDefault();</code> doesn't fire.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen, projection" href="refineslide/refineslide.css"/&gt;
      &lt;link rel="stylesheet" href="refineslide/refineslide-theme-dark.css" /&gt;
      &lt;link rel="stylesheet" href="reveal/reveal.css"&gt;
      &lt;script src="jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="behaviour.js"&gt;&lt;/script&gt;
  
  
      &lt;!--
          *
          * ANIMTED BUTTNONS SRC HERE
          * NOT BY ME
          *
      --&gt;
  
      &lt;link rel="stylesheet" href="animatedbuttons/buttons.css"&gt;
  
      &lt;!--
          *
          * KWICKS SRC HERE
          * NOT BY ME
          *
      --&gt;
  
      &lt;link rel='stylesheet' type='text/css' href="kwicks/jquery.kwicks.css" /&gt;
          &lt;style type='text/css'&gt;
              .kwicks {
                  width: 515px;
                  height: 100px;
              }
              .kwicks &gt; li {
                  width: 125px;
                  height: 100px;
                  /* overridden by kwicks but good for when JavaScript is disabled */
                  margin-left: 5px;
                  float: left;
              }
          &lt;/style&gt;
  
      &lt;!-- Including the Lobster, Arvo, Allan &amp; PT Sans fonts from Google's Font Directory --&gt;
      &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" /&gt;
      &lt;link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' /&gt;
      &lt;link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' /&gt;
      &lt;link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Allan:bold' /&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- START BANNER DIV --&gt;
  
      &lt;div class="divBanner"&gt;
  
              &lt;a href="updatelog/index.php" class="bannerLink"&gt;Update Log!&lt;/a&gt;
              &lt;a id="submission" href='#Home' onClick="test();" class="bannerLink"&gt;Home&lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;!-- END BANNER DIV --&gt;
  
      &lt;!-- START Center page container --&gt;
      &lt;div class="divCenter"&gt;
  
          &lt;!-- KWICKS SET --&gt;
          &lt;div class="kwicksOutsideContainer"&gt;
              &lt;div class="kwicksInsideContainer nudge"&gt;
                  &lt;ul class='kwicks kwicks-horizontal'&gt;
                          &lt;li id='panel-1'&gt;
                              &lt;div class="outerPanelDiv"&gt;
                                  &lt;div class="innerPanelDiv"&gt;
                                      &lt;a href='#Events' class="menuLink"&gt;Events&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li id='panel-2'&gt;
                              &lt;div class="outerPanelDiv"&gt;
                                  &lt;div class="innerPanelDiv"&gt;
                                      &lt;a href='#Committee' class="menuLink"&gt;Committee&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li id='panel-3'&gt;
                              &lt;div class="outerPanelDiv"&gt;
                                  &lt;div class="innerPanelDiv"&gt;
                                      &lt;a href='#Sponsors' class="menuLink"&gt;Sponsors&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li id='panel-4'&gt;
                              &lt;div class="outerPanelDiv"&gt;
                                  &lt;div class="innerPanelDiv"&gt;
                                      &lt;a href='#About' class="menuLink"&gt;About&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- END KWICKS SET --&gt;
  
  
          &lt;!-- SLIDER SET --&gt;
          &lt;div class="sliderContainer"&gt;
              &lt;br /&gt;&lt;br /&gt;
              &lt;ul class="rs-slider"&gt;
                  &lt;li&gt;&lt;img src="slide_img/img1.jpg" alt="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="slide_img/img2.jpg" alt="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="slide_img/img3.jpg" alt="" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
          &lt;!-- END SLIDER SET --&gt;
  
          &lt;div class="divHead"&gt;
              &lt;div class="welcomeMessage"&gt;&lt;/div&gt;
              &lt;div class="bookmarkRibbon"&gt;&lt;/div&gt;
              &lt;div class="welcomeBox nudge"&gt;
                  &lt;a href="#" data-animationspeed="650" data-reveal-id="myModal" class="welcomeW"&gt;W&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="kccLogo"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;!-- START DIV BODY --&gt;
  
          &lt;div class="divBody"&gt;
  
              &lt;!-- START DIV HOME --&gt;
  
              &lt;div id='Home'&gt;
  
  
              &lt;!-- START LEFT SIDE --&gt;
  
              &lt;div class="rightContainer"&gt;
  
                  &lt;div class="rightContainerHead"&gt;
                      &lt;ul class="webHeading"&gt;
                          &lt;li&gt;KCC Events!&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;div class="rightSliderContainer"&gt;
                      &lt;ul class="rs-slider2"&gt;
                          &lt;li&gt;&lt;img src="slide_img_event/img1.jpg" alt="" /&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;img src="slide_img_event/img2.jpg" alt="" /&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
  
              &lt;!-- END LEFT SIDE --&gt;  
  
  
              &lt;!-- START RIGHT SIDE --&gt;
  
              &lt;div class="leftContainer"&gt;
  
                  &lt;!-- START TOP --&gt;
                  &lt;div class="topLeft"&gt;
  
                      &lt;ul class="webHeadingQuestion"&gt;
                          &lt;li&gt;What Is KCC?&lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;div class="tucked-corners"&gt;
                          &lt;div class="top-corners"&gt;&lt;/div&gt;
  
                          &lt;p class="webText"&gt;
  
                                  KCC, or Korean Cultural Club, is a club formed during 2011 at UWA. With a passionate interest in Korean culture you can expect a full Korean experience with us. Our aim is to spread Korean culture and immerse other students in it. We do this through our events, chill sessions and activities.
  
                              &lt;br&gt;&lt;br&gt;
  
                              KCC is rapidly growing, so jump right in and join!
  
                          &lt;/p&gt;
  
                          &lt;div class="bottom-corners"&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!--
  
                      &lt;div class="topLeftTextContainer"&gt;
  
                          &lt;p class="webText"&gt;
  
                              KCC, or Korean Cultural Club, is a club formed during 2011 at UWA. With a passionate interest in Korean culture you can expect a full Korean experience with us. Our aim is to spread Korean culture and immerse other students in it. We do this through our events, chill sessions and activities.
  
                          &lt;br&gt;&lt;br&gt;
  
                          KCC is rapidly growing, so jump right in and join!
  
                          &lt;/p&gt;
  
                      &lt;/div&gt;
  
                      --&gt;
  
                  &lt;/div&gt;
                  &lt;!-- END TOP --&gt;
  
  
                   &lt;!-- START MIDDLE --&gt;
  
                  &lt;div class="middleLeft"&gt;
                      &lt;a href="#" class="button kcc medium"&gt;Find Out More&lt;/a&gt;
                  &lt;/div&gt; 
  
                   &lt;!-- END MIDDLE --&gt;
  
                  &lt;div class="bottomLeft"&gt;&lt;/div&gt; 
  
              &lt;/div&gt;
  
              &lt;!-- END RIGHT SIDE --&gt;
  
              &lt;/div&gt;
  
              &lt;!-- END DIV HOME --&gt;
  
  
              &lt;!-- START DIV EVENTS --&gt;
  
              &lt;div id='Events'&gt;
  
  
  
              &lt;/div&gt;
  
              &lt;!-- END DIV EVENTS --&gt;
  
          &lt;/div&gt;
  
          &lt;!-- END DIV BODY --&gt;
  
      &lt;/div&gt;
      &lt;!-- END Center page container --&gt;
  
  
      &lt;!-- MODAL HERE --&gt;
          &lt;div id="myModal" class="reveal-modal"&gt;
  
              &lt;!-- START NOTEPAD HERE --&gt;
              &lt;div class="notepadTop"&gt;
                  &lt;p class="notepadTitle"&gt;Hey There!&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="notepadMiddle"&gt;
                  &lt;div class="notepadMargin"&gt;&lt;/div&gt;
                  &lt;p class="notepadText"&gt;
  
                      We need to sort some things out before we start.
  
                      &lt;br&gt;&lt;br&gt;
  
                      This site uses the Webkit layout engine and will &lt;span class="notepadHighlight"&gt;only work with the following browsers:&lt;/span&gt;
  
                  &lt;/p&gt;
  
                  &lt;ul class="notepadList"&gt;
                      &lt;li&gt;Google Chrome&lt;/li&gt;
                      &lt;li&gt;Safari&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;p class="notepadTextTwo"&gt;
  
                      No, Firefox is not 100% supported because it doesn't use Webkit. Internet Explorer doesn't work at all.
  
                      &lt;br&gt;&lt;br&gt;
  
                       &lt;span class="notepadHighlight"&gt;The menu is above the image slider&lt;/span&gt; and you can show this item again by clicking the blue "W", next to the red ribbon.
  
                  &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="notepadBottom"&gt;
  
                  &lt;p class="notepadTextFooter"&gt;Enjoy!&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;!-- END NOTEPAD HERE --&gt;
  
               &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
          &lt;/div&gt;
      &lt;!-- END MODAL --&gt;
  
      &lt;!-- 
          *
          * SLIDER CALLS
          *
       --&gt;
  
      &lt;script src="refineslide/jquery.refineslide.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
      $(document).ready(function () {
          $('.rs-slider').refineSlide({
              transition         : 'random',
              transitionDuration : 1000,
              autoPlay           : true,
              keyNav             : false,
              delay              : 3000,
              controls           : null
          });
      });
      &lt;/script&gt;
  
      &lt;script&gt;
      $(document).ready(function () {
          $('.rs-slider2').refineSlide({
              transition         : 'cubeV',
              transitionDuration : 1000,
              autoPlay           : false,
              keyNav             : false,
              delay              : 4000,
              controls           : 'arrows'
          });
      });
      &lt;/script&gt;
  
      &lt;!-- 
          *
          * KWICKS CALLS
          *
       --&gt;
  
      &lt;script src='kwicks/jquery.kwicks.js' type='text/javascript'&gt;&lt;/script&gt;
          &lt;script type='text/javascript'&gt;
              $(function() {
                  $('.kwicks').kwicks({
                      size: 125,
                      maxSize : 250,
                      spacing : 5,
                      behavior: 'menu'
                  });
              });
      &lt;/script&gt;
  
      &lt;!-- 
          *
          * REVEAL CALLS
          *
       --&gt;
  
      &lt;script src="reveal/jquery.reveal.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>