title: hyperlinks become not clickable when javascript is used
body: <p>My bootstrap Navbar is not clickable when I use javascript to highlight active link</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
            $('.nav.navbar-nav &gt; li').on('click', function (e) {
            e.preventDefault();
            $('.nav.navbar-nav &gt; li').removeClass('active');
            $(this).addClass('active');
            });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is my navigation menu </p>
  
  <pre><code> &lt;nav class="navbar navbar-inverse navbar-static-top" &gt;
    &lt;div class="container-fluid" &gt;
  
    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
            &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
               &lt;a class="navbar-brand" rel="home" href="#" title="Fidel MRP"&gt;
                  &lt;img style="max-width:85px; margin-top: -18px; background-color: grey;
                       "src="/static/img/Fidel MRP-logo.png"&gt;
              &lt;/a&gt;
            &lt;/div&gt;
  
  
  
  
    &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
    &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/customer/home/"&gt;Sales&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/vendor/home/"&gt;Purchase&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="/item/category/list/"&gt;Inventory&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Manufacture&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
          &lt;li class="devider"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  
  &lt;ul class ="nav navbar-nav navbar-right"&gt;
    {% if request.user.is_authenticated %}
        &lt;li &gt;&lt;a href="{% url 'auth_logout' %}" %&gt;  {{user}} Logout  &lt;/a&gt;&lt;/li&gt;
    {% else %}
    &lt;li &gt;&lt;a href="{% url 'registration_register' %}" %&gt; Register &lt;/a&gt;&lt;/li&gt;
         {% endif %}
    &lt;li&gt;&lt;div class="form"&gt;
          {% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}
  
            &lt;form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'&gt;{% csrf_token %}
                &lt;div class='form-group'&gt;
                    &lt;input type='text' class='form-control' name='username' placeholder='Username' /&gt; 
                &lt;/div&gt;
                &lt;div class='form-group'&gt;
                    &lt;input type='password' class='form-control' name='password' placeholder='Password' /&gt;
                &lt;/div&gt;
                &lt;button type='submit' class='btn btn-default'&gt;Login&lt;/button&gt;
            &lt;/form&gt;
          {% endif %}
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The problem is </p>
  
  <p>I am using javascript provided to get  the visual effect on active menu item after onClick. This script works,  but the hyperlink stop working .(So I have to disable the script in order to be able to navigate)</p>
  
  <p>What could be the reason and how can it be resolved?</p>