title: Jquery button click not working
body: <p>I'm using bootstrap and want to put in a submenu within the page. However, can not get the jquery to recognize the button click. </p>
  
  <pre><code>&lt;div  class="navbar navbar-default visible-xs" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button id="sideMenuBtn" type="button" class="navbar-toggle " data-toggle="offcanvas" data-                                                       target=".sidebar-nav"&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 visible-xs" href="#"&gt;Project Name&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row row-offcanvas row-offcanvas-left"&gt;
      &lt;!-- sidebar --&gt;
      &lt;div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" &gt;
          &lt;hr /&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;test 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;test 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery is:</p>
  
  <pre><code>$(document).ready(function () {
    $('[data-toggle=offcanvas]').click(function () {
       $('.row-offcanvas').toggleClass('active');
    });
  });
  </code></pre>
  
  <p>If I change the first line of the code to <code>&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;</code> it works fine. But I dont want it fixed to top.</p>
  
  <p>Could someone please explain what I'm doing wrong</p>