Question

我正在jQuery Mobile中创建一个聊天应用程序。问题是，当您在页面之间导航并在提交数据时返回聊天页面时，将根据在其他页面之间导航的次数重新发送数据

当我执行整页刷新数据时，只根据需要发送一次。

我已尝试将data-ajax = false添加到链接的href（按钮），但它仍无效？

html代码：

<form id="form_message_user" method="post"    
action="#user_requestmoreinfo_page
  ">
  <div data-inset="true">
 <label for="requestmessage" class="ui-hidden-accessible"></label>
     <textarea cols="40" rows="6" name="requestmessage" 
 id="text_user_message" placeholder="Type message to send "></textarea>
  </div>
  <input type="submit" value="submit" id="submitmessage" />

 </form>

表单位于

页面上

<div data-role="page" id="user_requestmoreinfo_page" data-theme="e">

提交代码：

    $(document).on('pageshow', '#user_requestmoreinfo_page',function(e){
        var id_from = localStorage.loggedin_id;
        var id_to = localStorage.user_schoolls_id;
var message = $("#text_user_message").val();

$('#form_message_user').on('submit', function(e){
e.preventDefault();
 if(message > 0 ){
            // Send data to server through the Ajax call
            // action is functionality we want to call and outputJSON is our data
                $.ajax({url: '127.0.0.1/php/send.php',
                    data: {message:message,id_from:id_from,id_to:id_to},
                    type: 'post',                   
                    async: 'true',
                         dataType: 'json',
                    beforeSend: function() {
                        // This callback function will trigger before data is sent
                        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                    },
                    complete: function() {
                        // This callback function will trigger on data sent/received complete
                        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                    },
                    success: function (result) {
                    console.log(result);
                    },
                    error: function (error) {
                        // This callback function will trigger on unsuccessful action                
                        console.log(error);
                    }
                });                   
        } else {
            alert('Please enter the message');
        }           
        return false; // cancel original event to prevent form submitting
    });

  });

成功后，console.log（）会在到达页面之前根据页面导航的数量显示json数据（#user_requestmoreinfo_page）;

实施例：
如果我必须在其他页面之间导航3次，console.log（）将显示输出3次

Answer 1

我可以想到你遇到这种行为的两个原因。

1）代码乘法。将代码绑定到pagecreate，而不是pageshow，因为每次显示页面时都会触发后一个事件，复制提交代码并导致多个事件。

2）页面重复。这是jQM中一个众所周知的错误，描述为here。简而言之，在某些情况下，第一页（及其形式）在DOM中重复。要解决此问题，请使用属性data-url描述HTML文档的路径，并将其放在page div中。示例代码：

<div data-role="page" data-url="mysite/path/index.html" id="user_requestmoreinfo_page">

以下是代码的返工，添加了用于页面导航的按钮：

示例代码：

＆＃13;

$(document).on('pagecreate', '#user_requestmoreinfo_page', function(e) {

  $('#form_message_user').on('submit', function(e) {
    //Cancel default action (https://api.jquery.com/event.preventdefault/)
    e.preventDefault();

    //var id_from = localStorage.loggedin_id;
    //var id_to = localStorage.user_schoolls_id;
    var message = $("#text_user_message").val();

    //Validate
    if(message == "")
      alert('Please enter the message');

    // Send data to server through the Ajax call
    // action is functionality we want to call and outputJSON is our data
    alert("Thank you for your comment.");
    $.ajax({
      url: '127.0.0.1/php/send.php',
      data: {
        message: message,
        id_from: id_from,
        id_to: id_to
      },
      type: 'post',
      async: 'true', //<- true is default
      dataType: 'json',
      beforeSend: function() {
        // This callback function will trigger before data is sent
        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
      },
      complete: function() {
        // This callback function will trigger on data sent/received complete
        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
      },
      success: function(result) {
        console.log(result);
      },
      error: function(error) {
        // This callback function will trigger on unsuccessful action                
        console.log(error);
      }
    });

    return false; // cancel original event to prevent form submitting
  });
});

＆＃13;

<html>

<head>
  <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

  <div data-role="page" data-url="<mysite>/index.html" id="user_requestmoreinfo_page">
    <div data-role="content">
      <form id="form_message_user" data-ajax="false">
        <label for="requestmessage">Message:</label>
        <textarea data-inline="true" id="text_user_message" placeholder="Type message to send"></textarea>
        <input type="submit" value="Submit" data-inline="true" />
      </form>
      <a href="#second" data-role="button" data-inline="true">Next page</a>
    </div>
  </div>

  <div data-role="page" id="second">
    <div data-role="content">
      <p>
        Second page
      </p>
      <a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
      <a href="#third" data-role="button" data-inline="true">Third</a>
    </div>
  </div>

  <div data-role="page" id="third">
    <div data-role="content">
      <p>
        Third page
      </p>
      <a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 2

我的猜测是，每次处理#user_requestmoreinfo_page事件时，您都会将事件处理程序绑定到#form_message_user元素。我试着添加

$('#form_message_user').off('submit');

直接

之前

$('#form_message_user').on('submit', function(e){
    // function body continues

您也可以尝试使用.one：

$('#form_message_user').one('submit', function(e){
    // function body continues

根据文档，这应该与.off（）后跟.on（）具有相同的影响：

http://api.jquery.com/one/

如何在页面之间导航后停止jquery mobile中的重复数据

2 个答案: