使用jquery將文件內容加載到div

Question

我想要點擊特定鏈接時，文件的內容將被加載到一個div中。這工作正常，但是當我點擊其他文件時，我想要另一個文件的內容加載到該div中的ul元素中，但它不起作用。

這是我做了什麼：

$(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代碼：

<div id="div1"> 

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

Answer 1

那是因爲你（與$('#div1').html(response);）overwritting的#div1的內容，所以你刪除ul元素。所以接下來的AJAX調用時的ul無法找到..

您可以將HTML改爲

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

，並使用$('#ajaxresult').html(response);代替$('#div1').html(response);

Answer 2

你的問題是第一個Ajax調用覆蓋內#div1的HTML與$('#div1').html(response)當談到這樣#target不復存在第二個Ajax調用。

要解決它，您可以將HTML改爲：

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