javascript - Click event only triggers once, after the page is loaded -


i have click event in jquery. desired behavior function execute every time link clicked. however, actual behavior page loads , function executed once , never again. offending code follows. thanks!

<!doctype html> <head> <meta charset="utf-8">  <style> #sub { position:fixed; z-index:999; margin-top:180px; margin-left:200px; display:none;} </style>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script> function showdiv(divid) {    $('.menu').hide();    $('#'+divid).fadetoggle('slow'); }; $(document).ready(function(){     $('a#opt1').click(showdiv('sub'));     $('a#opt2').click(function(){$('.menu').hide();}); });  </script> </head> <body>     <li><a id="opt1" href="#">option1</a></li>     <li><a id="opt2" href="#">option2</a></li> </ul> <ul id="sub">     <li><a href="#">mission</a></li>     <li><a href="#">press</a></li> </ul> 

you supposed pass function reference .click. in case, passed returned value of function instead of actual function. long story short, should wrap function(){}:

$('a#opt1').click(function(){     showdiv('sub'); }); 

the jquery documentation on .click states have pass function, instead passed undefined in example. why executed once.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -