ページ間の移動後にjqueryモバイルで重複データを停止する方法

Question

jQuery Mobileでチャットアプリケーションを作成しています。問題は、ページ間を移動してデータを送信するときにチャットページに戻ったときにデータが再送信されることです1つのページが他のページに移動した回数

フルページのリフレッシュを実行すると、必要に応じてデータが1回だけ送信されます。

リンク（ボタン）のhrefにdata-ajax = falseを追加しようとしましたが、それでも機能しませんでしたか？

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

私の推測では、あなたが#form_message_user要素にイベントハンドラをバインドしていることである出力を表示します#user_requestmoreinfo_pageイベントが処理されるたびに実行されます。

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

ドキュメントによると、同じことが.offように影響しているべきである：私はあなたにも.oneを使用して試みることができる直接

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

前

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

を追加してみたいです（）に続いて.on（）：

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

Answer 2

この現象が発生する理由は2つあります。

1）コード乗算。コードがpagecreateにバインドされます。pageshowではなく、後者のイベントがページが表示されるたびにトリガーされ、送信コードが複製され、複数のイベントが発生します。

2）ページの複製。これは、hereと記載されているjQMのよく知られたバグです。つまり、特定の状況下では、最初のページ（およびそのフォーム）がDOMに複製されます。これを修正するには、属性data-urlを使用してHTML文書へのパスを記述し、page divに配置します。コード例：

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

ここでは、ページナビゲーションのための追加ボタンを使用してコードの手直しです：

例コード：

$(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 
 
    }); 
 
});

<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>