javascript - Losing click even when page is loaded with ajax -

this question has answer here:

• events triggered dynamically generated element not captured event handler 5 answers

i have page left nav has 2 links , main div. main div updated content server whenever user clicks link in left nav. use pjax this.

when user comes page, main div has link id somelink shows alert box when user clicks hyperlink. accomplished code:

   $(document).ready(function() {      .....     $('#somelink').click(function (event){        alert("here");     });      ....    }); 

when second link on nav bar clicked, load content server , update main div. when user clicks first link, again load content server , update main div. however, time when click somelink nothing happens. if jquery isn't able detect there link id somelink because loaded via ajax.

is there way overcome this?

you need use .on , delegate click handler higher level element isn't being replaced since it's loaded ajax.

$(main).on('click', '#somelink', function() {     alert("here"); }); 

the reason being when $('#somelink'), goes through dom , finds each 1 is. so, when remove replacing, either need add again or use .on