每次单击按钮时,页面都会显示重复的帖子

时间:2017-04-02 21:53:52

标签: jquery

我和Jquery Mobile有一个奇怪的问题。我创建了一个显示帖子并正确显示帖子的页面。

现在的问题是,每当我点击后退按钮并再次点击“发布”按钮时,它就会复制帖子并显示。我点击后退按钮并单击发布按钮的次数,帖子相应地重复并显示为倍数。

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

但如果我在每次单击后退按钮后刷新页面,则会正确显示帖子。任何人都可以指导我哪里出错了吗?

以下是代码:

HTML PAGE:

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

1 个答案:

答案 0 :(得分:0)

在这一行:

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

.append更改为.html

&#34;附加&#34;意味着将内容添加到元素中已有的内容(在这种情况下为#userPosts) ;)


修改

好。让我们尝试别的东西。
您已经使用localstorage ...

为什么不在加载帖子时设置布尔标志? 还有一个日期标志,可以知道它何时被加载......

我称之为旗帜的是一个仅用于记住状态的变量......用于比较。

所以这应该有用。
请注意,您可以使用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";
    }
  }
}