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
Post a Comment