Jquery button click not working

Question

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.

<div  class="navbar navbar-default visible-xs" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button id="sideMenuBtn" type="button" class="navbar-toggle " data-toggle="offcanvas" data-                                                       target=".sidebar-nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">Project Name</a>
        </div>
    </div>
</div>
<div class="row row-offcanvas row-offcanvas-left">
    <!-- sidebar -->
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" >
        <hr />
        <ul class="nav">
            <li><a href="#">test 1</a></li>
            <li><a href="#">test 2</a></li>
            <li><a href="#">test 3</a></li>
            <li><a href="#">test 2</a></li>
        </ul>
    </div>
</div>

jquery is:

$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
     $('.row-offcanvas').toggleClass('active');
  });
});

If I change the first line of the code to <div class="navbar navbar-default navbar-fixed-top" role="navigation"> it works fine. But I dont want it fixed to top.

Could someone please explain what I'm doing wrong

You know you didn't close the document ready function properly ? — adeneo, Jul 18 '14 at 18:00
Not sure if it is just a typo, but one of your button declartions is missing '>' (see sideMenuBtn) — skarist, Jul 18 '14 at 18:01
}); is how it should be closed. It is right in my document, just forgot to type it in. — user2789697, Jul 18 '14 at 18:01
If I change the first line of the html code to:
then it works fine. But I dont want it to be fixed to top. — user2789697, Jul 18 '14 at 18:10
so the button works but is just not positionned as intended? Did you try to console.log() something inside the button's click event? — Niflhel, Jul 18 '14 at 18:32
Sorry did'nt explain myself well. If I take out the navbar-fixed-top of the first line of code then it does not work at all.. Button is position correctly, but does not work unless navbar-fixed-top class is added. The interesting thing is I can put my code on jsfiddle it works fine there. but not in my local development environment which is VS 2013. — user2789697, Jul 18 '14 at 18:58

score 0 · Answer 1 · answered Jul 18 '14 at 20:42

Found the answer. Thank you to everyone who commented. The answer was really simple. I just changed the first line of code to <div class="navbar navbar-default visible-xs" role="navigation" style="z-index:1000"> Apparently something was covering the button. when I raised the z-index, problem disappeared.

Jquery button click not working

1 Answers1