title: Javascript Prevent Default Not Working
body: <p>I know there are many posts about there regarding preventDefault() not working but I went to those and got nothing out of it. </p>
  
  <p>All I'm doing is catching a click event and then appending the html from the response but preventDefault() isn't stopping the page from reloading and I'm confused why.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div class="slide_pane"&gt; 
   &lt;div class="profile_content"&gt;&lt;/div&gt;
  
   &lt;div class="account_bottom_bar"&gt;
    &lt;ul class="bottom_bar_list"&gt;
      &lt;a href="/profiles/load" class="sidebar_link"&gt;
        &lt;li&gt;
          &lt;p&gt;Content&lt;/p&gt;
        &lt;/li&gt;
      &lt;/a&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And here's my JS:</p>
  
  <pre><code>$(document).scroll(function() {
   ajaxView();
  });
  
  var ajaxView = function() {
   $('.sidebar_link').click(function(e) {
   e.preventDefault();
   $.ajax ({
    type: 'GET',
    url: $(this).attr("href")
  
    }).done(function(resp) {
     $('.profile_content').append(resp);
    });
   });
  };
  </code></pre>
  
  <p>But when I hit that action, it just loads the HTML from the response in a new screen.</p>
  
  <p>Any ideas?? Thanks!</p>