jQuery not running, no error message. Syntax error?

Question

Good morning,

jsbin attached: http://jsbin.com/kasofufuni/edit?html,css,js,console,output

I'm trying to make a simple show/hide function. I've pared it down to what you can see in the code above, but some sort of syntax error is causing it to not run or give an error. I've been mashing at it for a couple hours. Any ideas?

I got it to work once in a console, but I have not been able to reproduce.

 $(document).ready(function(){
    $('nav#global').prepend('<span id="menu-icon">Menu</span> <span id="search-icon">Search</span>');

 });   

$('#menu-icon').on('click',function(){
    $('nav#global').prepend('You clicked it'); 
});

Please add code to this page and not external sites

Jack M.
– Jack M.

2015-08-14 15:04:52 +00:00
Commented Aug 14, 2015 at 15:04 — Jack M.
– Jack M., Commented Aug 14, 2015 at 15:04

charlietfl · Accepted Answer · 2015-08-14 15:04:10Z

1

Your click event code is outside of document.ready so it runs before element exists

Change to:

$(document).ready(function(){
     $('nav#global').prepend('<span id="menu-icon">Menu</span> <span id="search-icon">Search</span>');  


    $('#menu-icon').on('click',function(){
        $('nav#global').prepend('You clicked it'); 
    });

 });

Code will run fine in console because element exists then

answered Aug 14, 2015 at 15:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Andy · Accepted Answer · 2015-08-14 15:04:19Z

0

If you don't want to include the code in your document.ready function, you can use some event delegation:

$(document).on('click', '#menu-icon', function(){
    $('nav#global').prepend('You clicked it'); 
});

answered Aug 14, 2015 at 15:04

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

jQuery not running, no error message. Syntax error?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related