load file contents into div using jquery

Question

I want when click on specific link , the contents of a file will be loaded in a div. this works fine , but when I click on anothe one , I want contents of another file to loaded in ul element that is in that div,but it's not working .

this is what I made :

$(document).on('click', 'a.link2', function() {
 var value = $(this).attr("href");
 value=value.replace("#","");
 var linkName = {'href':value};
 $.ajax({
 type: "POST",
 url: 'pp.php',
 data :linkName,
 success: function(response){
 if(value=="login")
 $('#div1').html(response); 
 }
 });
 }); 
 $(document).on('click', 'a.link', function() {
 var value = $(this).attr("href");
 value=value.replace("#","");
 var linkName = {'href':value};
 // alert(value+"dd");
 $.ajax({
 type: "POST",
 url: 'make.php',
 data :linkName,
 success: function(response){
 $('#target').html(response);
 }
 });
 }) ;

html code:

<div id="div1">
<ul id="target">
 .
 .
 .
 </ul></div>

Answer 1

That happens because you are overwritting the contents of #div1 (with $('#div1').html(response);) and so you remove the ul element. So when the next ajax call is made the ul cannot be found..

You can change your html to

<div id="div1">
 <div id="ajaxresult"></div>
 <ul id="target"></ul>
</div>

and use $('#ajaxresult').html(response); instead of $('#div1').html(response);

Answer 2

Your problem is the first ajax call overwrites the html inside #div1 with $('#div1').html(response) so #target no longer exists when it comes to the second ajax call.

To get around it, you can change your html to:

<div id="div1"></div>
<ul id="target"></ul>