4

My problem is the .click event below. The 'nav' and '#closemenu' div hide as expected on document ready, but the click event won't work to save my life. Either I'm missing something embarrassingly small (which I hope is unlikely because I copy/pasted the code from the jQuery API page and then changed only the ID and alert) or else I have no idea what my issue is. Any help is much appreciated.

Here's my code:

$(document).ready(function() {
  $('nav').hide();
  $('#closemenu').hide();

  $('#menuicon').click(function() {
    alert('Hello, test');
  });
});
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <header>
    <h1>Page Title Here</h1>
    <div id="menuicon">
      <img src="mobile_menu.png">
    </div>
    <nav>
      <ul>
        <a href="">
          <li class="upCase">Projects</li>
        </a>
        <a href="">
          <li clas s="upCase">Profile</li>
        </a>
        <a href="">
          <li class="upCase">Contact</li>
        </a>
      </ul>
    </nav>
    <div id="closemenu">
      <p>X</p>
    </div>
  </header>
</body>
scniro
  • 16,844
  • 8
  • 62
  • 106
DanielNordby
  • 569
  • 2
  • 6
  • 20

1 Answers1

0

Why don't you just add the event directly like this

For multiple div use the below

$( "#menuicon" ).bind({ click: function(){ alert ();} });

Deepak Rajappan
  • 155
  • 5