reactjs - jQuery Animate works after first click -

i'm trying hook jquery's animate ability bookmark id on site. when click on link, went bookmark id without animation when clicked same link again, animation works.

var titlenav = react.createclass({     handlesubmitclick:function()     {         $('a').click(function()         {             $('html, body').animate(             {                 scrolltop: $( $.attr(this, 'href') ).offset().top             }, 500);             return false;         });     },      render:  function() {         return(             <div>                 <ul classname = "nav">                     <li classname = "navworkspace" onclick ={this.handlesubmitclick}><a href="#work">work</a></li>                 </ul>             </div>         );     } }); 

i assume way components called since components not wait on each other. there way fix this?

note: using react.js render site.

the reason handlesubmitclick function binding click event handler link, not trigger event. first time click on link, nothing bind event. after that, since handler binded, animation works 2nd times , on. can change code to

var titlenav = react.createclass({     componentdidmount: function()     {         $('.nav a').click(function()         {             $('html body').animate(             {                 scrolltop: $(this).offset().top             }, 500);             return false;         });     },      render:  function() {         return(             <div>                 <ul classname = "nav">                     <li classname = "navworkspace"><a href="#work">work</a></li>                 </ul>             </div>         );     } }); 

or can this

var titlenav = react.createclass({     handlesubmitclick: function(e)     {         $('html body').animate(         {             scrolltop:$(e.target).offset().top         }, 500);         return false;      },      render:  function() {         return(             <div>                 <ul classname = "nav">                     <li classname = "navworkspace" ><a href="#work" onclick ={this.handlesubmitclick}>work</a></li>                 </ul>             </div>         );     } });