爲什麼這個jQuery Mobile多頁觸發多個提交事件？

下面是一個測試頁面。如果我瀏覽所有JQM'頁面'，然後返回到第一頁，然後單擊提交，'提交'提示對話框將彈出4次。我究竟做錯了什麼？我應該怎麼做才能讓提交事件只觸發一次？爲什麼這個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

所以你要在多個頁面中的一個形式？你想自動提交？ – 2012-02-03 13:54:59

@PhillPafford我沒有嘗試自動提交。但是，是的，表單已經覆蓋多個頁面。提交事件會多次觸發，而應該只觸發一次。 – Jack 2012-02-03 14:11:24

你這樣做：

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

我認爲這是燒製加載每個頁面，正確的？

也許嘗試這樣的事：

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

來源

2012-02-03 14:21:21

爲什麼這個jQuery Mobile多頁觸發多個提交事件？

回答

相關問題