ボタンをクリックするたびにページが重複して表示される

Question

Jquery Mobileで奇妙な問題が発生しています。投稿を表示し、投稿を正しく表示しているページを作成しました。

ここで問題は、戻るボタンをクリックして投稿ボタンを再度クリックすると投稿と表示が複製されることです。私がバックボタンをクリックしてポストボタンをクリックする回数は、投稿がそれに応じて複製され、複数で表示されます。

たとえば、表示されている投稿があります。ここで私はバックボタンをクリックしてから、表示ポストボタンをクリックします。今回は、同じポストが2回表示されます。今再び私が戻るボタンをクリックし、次に投稿の表示ボタンをクリックすると、同じ投稿が3回表示されます。

しかし、バックボタンをクリックするたびにページをリフレッシュすると、投稿が正しく表示されます。私がどこに間違っているか教えてくれますか？ここで

はコードです：

HTMLページ：

<div data-role="page" id="userpost"> 
    <div data-role="header" data-theme="b"> 
     <a class="back" class="button button-clear" data-rel="back" data-icon="back" href="#">back</a> 
     <p style="text-align: center">Posts History</p> 
    </div> 
    <div data-role="content"> 
     <p id="username"></p> 
     <div class="row cf" id="userPosts"> 
     </div> 

     <div data-role="footer" data-position="fixed" data-theme="b"> 
      <h6>&copy;</h6> 
     </div> 
    </div> 
</div> 

jQueryのコード：この行で

function displayuserPosts() { 
    if (localStorage.login = "true") { 
     var username = localStorage.username; 
     $('#username').append("<p style='font-size:10px; color:red; text-align:center;'>Welcome: " + username + "</p>"); 
     var userPosts = "username=" + username + "&upost"; 
     $.ajax({ 
      type: "GET", 
      url: "../php-code2/uposts.php", 
      data: userPosts, 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (i, field) { 
        $("#userPosts").append('<p class="job cf">'+ field.title +'</p>'); 
       }); 
      } 
     }); 
    } else { 
     alert("Please login to post a Job"); 
     window.location.href = "#Main"; 
    } 
} 

Answer 1

：

$("#userPosts").append('<p class="job cf">'+ field.title +'</p>'); 

変更.appendから.html。

「追加」は、既に要素内にある内容（この場合は#userPosts）を追加することを意味します。
;）

---

EDIT

さて。それでは別のものを試してみましょう。
既にローカルストレージを使用しています...

投稿が読み込まれたときにブール値フラグを設定しないのはなぜですか？
ロードされた時を知る日付フラグ...

私がフラグと呼ぶのは、状態を覚えておくためだけに使用される変数です。比較に使用されます。

これはうまくいくはずです。
more precise timeを使用して覚えておくことができます。

// It good to know todays date. 
var today = new Date().getDate(); // day of the month 

function displayuserPosts() { 

    // Executes only if logged in AND the posts not already loaded today. 
    if( localStorage.login == "true" 
     && localStorage.userpostsLoaded != "true" 
     && localStorage.userpostsWhen != today){ 

     var username = localStorage.username; 
     $('#username').append("<p style='font-size:10px; color:red; text-align:center;'>Welcome: " + username + "</p>"); 
     var userPosts = "username=" + username + "&upost"; 

     $.ajax({ 
      type: "GET", 
      url: "../php-code2/uposts.php", 
      data: userPosts, 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (i, field) { 
        $("#userPosts").append('<p class="job cf">'+ field.title +'</p>'); 
       }); 

       // Set some flags! 
       localStorage.userpostsLoaded="true"; 
       localStorage.userpostsWhen=today; 
      } 
     }); 

    }else{ 

    // If the Ajax request was avoided because of the login 
    if(localStorage.login != "true"){ 
     alert("Please login to post a Job"); 
     window.location.href = "#Main"; 
    } 
    } 
}