在加載外部html後返回

在這一個上我的大腦（我是jQuery等新手）在加載外部html後返回

我已經設法加載一個外部html文件到我的頁面上點擊，但無法弄清楚如何返回到以前在該div中的內容。

我的代碼：

$(document).ready(function(){ 
    $('.project').click(function(e){ 
     var link = $(this).attr('rel'); 
     event.preventDefault(); 
     $('#main').empty(); 
     $('#main').load(link); 
    }); 
});

任何幫助將非常感激。

謝謝！

來源

2012-06-14 Bennjamin_

'.load'將'empty'加載新的內容之前股利。但是，您可以嘗試在'.load'之前克隆div，並根據需要使用克隆。注意：'$（'＃main'）。empty（）;'然後'$（'＃main'）。load（link）;'是多餘的，'.load'會清空div。 –

您可以克隆div和它存儲在一個變量：

var whatWas = $('#main').clone();

來源

2012-06-14 15:40:36 undefined

您需要存儲哪些是在div您加載新的HTML之前。很可能您需要將其存儲在全局變量中。

<script type="text/javascript"> 
    var whatWas; 

    $(document).ready(function(){ 
     $('.project').click(function(e){ 
      global whatWas; 
      var link = $(this).attr('rel'); 
      whatWas = $('#main').clone(); 
      event.preventDefault(); 
      $('#main').empty(); 
      $('#main').load(link); 
     }); 
    }); 

    ... 
    //here you need to catch the event that you want to use to load the original content back into the div 
</script>

當你想回去就可以與原來的HTML這樣的替換DIV：

$('#main').html(whatWas);

來源

2012-06-14 15:44:03

.load將會加載新的內容之前清空股利。但是，您可以嘗試在.load之前克隆div並根據需要使用克隆。

注意：$('#main').empty();然後$('#main').load(link);是多餘的，因爲.load會清空div。

嘗試像下面，

$(document).ready(function(){ 
    var $mainClone = null; 
    $('.project').click(function(e){ 
     var link = $(this).attr('rel'); 
     event.preventDefault(); 
     $mainClone = $('#main').clone().prop('id', 'main-clone'); //clone and change ID 
     $('#main').load(link); 
    });  
});

以後你可以用下面取代#main內容，

$('#main').html($mainClone.html())

來源

2012-06-14 15:44:58

@Bennjamin_嘗試設置你有什麼http://www.jsFiddle.net我們可以試試看。 –

就是這樣。 http://jsfiddle.net/vgh64/7/ 我不知道如何在jsfiddle中設置ajax。當你點擊圖片時，應該有一個「後退鏈接」，這將成爲返回克隆內容的事件。那有意義嗎？ –

'$（'＃main'）。html（$ mainClone.html（））'並不完全替代div，它會在舊版本中放入一個div的新副本。請參閱http://stackoverflow.com/questions/1344030/how-can-i-use-jquery-load-to-replace-a-div-including-the-div進行實際更換。 – Noumenon

在加載外部html後返回

回答

相關問題