Jquery is not getting triggered after Ajax call....
Hi All,
I have a following scenario :
1) I have a div container with some elements and an anchor tag is in it
For Eg:
<div class="mainContainer">
<!--Content-1 -->
<ul>
<li><a href="#">Link-1</a></li>
<li><a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
</ul>
</div>
Now i have a click function associated with the anchor tag (And i kept the function in a seperate Javascript file
$(document).ready(function(){
$('.mainContainer a).click(function(){
//do some process here....
});
});
2) On click of the link "Click Here" an Ajax call is made and it just refreshes the content as follows:
<div class="mainContainer">
<!--Content-1 -->
<ul>
<li><a href="#">Link-4</a></li>
<li><a href="#">Link-5</a></li>
<li><a href="#">Link-6</a></li>
</ul>
</div>
3) Now the after the Ajax call is completed, the container is updated with the new set of results, BUT when i click on the links, once again the Ajax call / the click event is not getting triggered. If i place the jquery function inside the page, its working fine BUT Not when i move it to an external js file.
Can you please help me out on understanding this? Appreciate all your time and help, Have a nice day!
Thanks & Regards,
Sathya