なぜこのjQuery Mobileマルチページは複数の送信イベントをトリガーしますか？

以下はテストページです。 JQMのすべてのページを通過して最初のページに戻ってからsubmitをクリックすると、 'SUBMITTING'アラートダイアログが4回ポップアップします。私は間違って何をしていますか？送信イベントを1回だけ発生させるにはどうすればよいですか？なぜこのjQuery Mobileマルチページは複数の送信イベントをトリガーしますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8"> 
    <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script> 
    <link rel="stylesheet" href="jquery-mobile/jquery.mobile.css"/> 
    <link rel="stylesheet" href="css/custom-icons.css"/> 
    <link href="css/jquery.mobile-swatch-f.css" rel="stylesheet" type="text/css"/> 
    <script src="js/jquery.js"></script> 
    <script src="jquery-mobile/jquery.mobile.js"></script> 

    <script> 
     $('div:jqmData(role="page")').live('pageinit', function() { 
      $('form').submit(function(e) { 
       alert("SUBMITTING"); 
      }); 
     }); 
    </script> 
</head> 

<body> 
<form id="frm_testform_happy_party"> 
    <div data-role="page" id="testform_menu" data-theme="f" class="dummyclass"> 
     <div data-role="header"> 

      <h1>Testing testing</h1> 
     </div> 
     <div data-role="content"> 
      <ul data-role="controlgroup"> 
       <li><a target_id="testform_happy" href="#testform_happy" data-role="button" 
         style="text-align:left" data-icon="arrow-r" 
         data-iconpos="right" class=".ui-icon-manditory">happy party</a></li> 
       <li><a target_id="testform_description" href="#testform_description" data-role="button" 
         style="text-align:left" data-icon="arrow-r" 
         data-iconpos="right">Description</a></li> 
       <li><a target_id="testform_vehicle" href="#testform_vehicle" data-role="button" 
         style="text-align:left" data-icon="arrow-r" data-iconpos="right">Vehicle</a> 
       </li> 
      </ul> 
      <input id="submit_claim" type="submit" name="send" value="Submit" id="submit"/> 

      <div id="debug"> 
      </div> 
     </div> 

     <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"> 
      <a href="index.html#claim_menu" rel="external" data-icon="arrow-l" data-direction="reverse" 
       data-iconpos="left" 
       style="margin-left: 10px; margin-top: 5px">Done</a> 
      <a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext" 
       style="float: right; margin-right: 10px; margin-top: 5px"></a> 
     </div> 
    </div> 

    <div data-role="page" id="testform_happy" data-theme="f"> 
     <div data-role="header"> 
      <a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a> 

      <h1>Happy Party</h1> 
      <a href="#testform_description" data-icon="arrow-r" data-iconpos="notext"></a> 
     </div> 
     <div data-role="content"> 
      <label for="happy_initials">Initials:</label> 
      <input type="text" name="happy_initials" id="happy_initials" value="" class="required"/> 
     </div> 
     <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"> 
      <a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" 
       style="margin-left: 10px; margin-top: 5px">Done</a> 
      <a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext" 
       style="float: right; margin-right: 10px; margin-top: 5px"></a> 
     </div> 
    </div> 

    <div data-role="page" id="testform_description" data-theme="f"> 
     <div data-role="header"> 
      <a href="#testform_happy" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a> 

      <h1>Description</h1> 
      <a href="#testform_vehicle" data-icon="arrow-r" data-iconpos="notext"></a> 
     </div> 
     <div data-role="content"> 
      <label for="incident_date">Date of Incident:</label> 
      <input type="date" name="incident_date" id="incident_date" value="" class="required"/> 
     </div> 
     <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"> 
      <a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" 
       style="margin-left: 10px; margin-top: 5px">Done</a> 
      <a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext" 
       style="float: right; margin-right: 10px; margin-top: 5px"></a> 
     </div> 
    </div> 

    <div data-role="page" id="testform_vehicle" data-theme="f"> 
     <div data-role="header"> 
      <a href="#testform_description" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a> 

      <h1>Vehicle</h1> 
     </div> 
     <div data-role="content"> 
      <label for="vehicle_registration_number">Registration Number:</label> 
      <input type="text" name="vehicle_registration_number" id="vehicle_registration_number" value="" 
        class="required"/> 
     </div> 
     <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"> 
      <a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" 
       style="margin-left: 10px; margin-top: 5px">Done</a> 
      <a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext" 
       style="float: right; margin-right: 10px; margin-top: 5px"></a> 
     </div> 
    </div> 
</form> 
</body> 
</html>

出典

2012-02-03 Jack

：

たぶん、このような何かを試してみてください？自動提出しようとしていますか？ –

@PhillPafford私は自動提出を試みていません。しかし、はい、フォームは複数のページにまたがっています。送信イベントは複数回発生しますが、1回のみ発生する必要があります。 – Jack

あなたはこれをやっている：

<script> 
    $('div:jqmData(role="page")').live('pageinit', function() { 
     $('form').submit(function(e) { 
      alert("SUBMITTING"); 
     }); 
    }); 
</script>

私はこれがロードされたページごとに発射されたと思いますが、正しいですか？ですから、複数のページ上の1人の形をしたい

<script> 
    $(function() { 
     $('#submit_claim').click(function() { 
     $('form').submit(function(e) { 
      alert("SUBMITTING"); 
     }); 
     }); 
    }); 
</script>

出典

2012-02-03 14:21:21

なぜこのjQuery Mobileマルチページは複数の送信イベントをトリガーしますか？

答えて

関連する問題