Jquery click listener not firing (html,css,jquery)

Question

I have this script in the head of the html:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(function () {
        $('.nav-toggle').on('click',function(){
            $('.mainnav').toggleClass('open');
        });
    });
</script>

which should fire when:

<header>
    <img class="nav-toggle" src="static/images/menunav.png" style="cursor: pointer;">
</header>

this image is clicked.

and toggle the subclass open in:

<ul class="text mainnav">
        <li>Home</li>
        <li>Projects</li>
        <li>Techniques</li>
        <li>About me</li>
    </ul>

But it wont fire the .open class? What am i doing wrong here (first time jquery user).

CSS:

.nav-toggle {
  float: right;
  margin-right: 70px;
}

    .mainnav{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #222;
      text-align: center;
      list-style: none;
      display: inline-block;
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }

    .mainnav.open {
      transform: translateX(50%);
}

Seems to work just fine -> jsfiddle.net/adeneo/syuqmyr1

adeneo
– adeneo

2016-10-16 15:47:34 +00:00
Commented Oct 16, 2016 at 15:47 — adeneo
– adeneo, Commented Oct 16, 2016 at 15:47
Yeah, it works.

kind user
– kind user

2016-10-16 15:48:02 +00:00
Commented Oct 16, 2016 at 15:48 — kind user
– kind user, Commented Oct 16, 2016 at 15:48
Sounds like you forgot to wait for $(document).ready().

connexo
– connexo

2016-10-16 16:04:27 +00:00
Commented Oct 16, 2016 at 16:04 — connexo
– connexo, Commented Oct 16, 2016 at 16:04

Erik Simonic · Accepted Answer · 2016-10-16 16:14:10Z

3

I guess the problem is in the html. Try to split

<script src="[JQuery CDN]"></script>
<script>
$(function(){ ... });
</script>

answered Oct 16, 2016 at 16:14

Erik Simonic

4673 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery click listener not firing (html,css,jquery)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related