jquery - Document.ready function is not working after new pageload -

my code this,

page1.html

<button onclick="loadnextpage();"> <div id="main"> </div>  function loadnextpage() {     /*i calling end code here gives page2.html*/     $("#main").html(response); } 

page2.html

<script type="text/javascript">     $(document).ready(function(){         alert("document.ready in social")         jquery("abbr.timeago").timeago();     }); </script>  <div class"submain"> <time>      <abbr class="timeago" title=${rec[5]}>${rec[5]}</abbr> </time> </div> 

i getting page2.html inside specified div. problem 2 lines inside document.ready function not working. please me in case.

your page2 loading via ajax in case, in page2 script should after element,it should this:

<div class"submain"> <time>      <abbr class="timeago" title=${rec[5]}>${rec[5]}</abbr> </time> </div>  <script type="text/javascript">          alert("document.ready in social")         jquery("abbr.timeago").timeago();  </script> 

and line wrong, typing mistake while posting question looks like:

$(#main).html(response); 

it should be:

$("#main").html(response);