页面显示重复的帖子，我每次点击按钮

Question

我有一个奇怪的问题与JQuery的移动。我创建了一个显示帖子并正确显示帖子的页面。

现在的问题是，每当我点击后退按钮并再次点击帖子按钮时，它会复制帖子并显示。我点击后退按钮并点击发布按钮的次数，帖子相应地被复制并以倍数显示。

例如，我有一个正在显示的帖子。现在我点击返回按钮，然后点击显示帖子按钮，这次，同一帖子显示两次。现在再次，如果我点击返回按钮，然后点击显示帖子按钮，它现在相同的帖子显示三次等等。

但是，如果我在每次后退按钮点击后刷新页面，则它会正确显示帖子。任何人都可以引导我在哪里出错？

这里是代码：

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"; 
    } 
    } 
}