2016-11-24 37 views
0

我試圖刷新div,但它是複製其他所有內容。 在我做任何事之前,頁面看起來像這樣:initial page 第二個按鈕應該是刷新div,但是當我這樣做時,這是我得到的:after trying to refresh, it refreshes it, but duplicates everything else 我該如何使它只刷新div?如何刷新div而不添加

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
    <br/> 
    <div id='ff'>something</div> 
    <input id='input'/> 
    <button id='btn1'>first</button> 
    <button id='btn2'>second</button> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $('#btn1').click(function(){ 
       var input=$('#input').val(); 
       $('#ff').text(input); 
      }); 
      $('#btn2').click(function(){ 
       $('#ff').load('thing2.html'); 
      }); 
     }); 
    </script> 
</body> 

+0

是這個文件的名稱thing2.html? – WEBjuju

+0

我似乎無法複製該問題... [codepen](http://codepen.io/NDfool/pen/gLRvMo?editors=0010) –

回答

1

在這一行

$('#ff').load('thing2.html'); 

你只使用id = 「FF」 更新您的div,但要裝載到的thing2.html的全部內容。

0

這是你在找什麼?如果不是,你能解釋一下嗎?

$(document).ready(function(){ 
 
    $('#btn1').click(function(){ 
 
     var input=$('#input').val(); 
 
     $('#ff').text(input); 
 
    }); 
 
    $('#btn2').click(function(){ 
 
     $('#input').val(''); 
 
    }); 
 
});
<div id='ff'>something</div> 
 
    <input id='input'/> 
 
    <button id='btn1'>first</button> 
 
    <button id='btn2'>second</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

0

你又加載things2.html,因此它的複製。 我已經使用location.reload()來刷新和工作正常。你在找這個嗎?

$(document).ready(function(){ 
     $('#btn1').click(function(){ 
      var input=$('#input').val(); 
      $('#ff').text(input); 
     }); 
     $('#btn2').click(function(){ 
     // $('#ff').load('things.html'); 
     location.reload(); 
     }); 
    });