title: Why does this jQuery Mobile multipage trigger multiple submit events?
body: <p>Below is a test page. If I go through all the JQM 'pages' and then go back to the first page, and then click submit, the 'SUBMITTING' alert dialog will pop up 4 times. What am I doing wrong? What should I do to make the submit event fire only once?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script type="text/javascript" charset="utf-8" src="js/phonegap.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="jquery-mobile/jquery.mobile.css"/&gt;
      &lt;link rel="stylesheet" href="css/custom-icons.css"/&gt;
      &lt;link href="css/jquery.mobile-swatch-f.css" rel="stylesheet" type="text/css"/&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="jquery-mobile/jquery.mobile.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $('div:jqmData(role="page")').live('pageinit', function() {
               $('form').submit(function(e) {
                  alert("SUBMITTING");
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id="frm_testform_happy_party"&gt;
      &lt;div data-role="page" id="testform_menu" data-theme="f" class="dummyclass"&gt;
          &lt;div data-role="header"&gt;
  
              &lt;h1&gt;Testing testing&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;ul data-role="controlgroup"&gt;
                  &lt;li&gt;&lt;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"&gt;happy party&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a target_id="testform_description" href="#testform_description" data-role="button"
                         style="text-align:left" data-icon="arrow-r"
                         data-iconpos="right"&gt;Description&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a target_id="testform_vehicle" href="#testform_vehicle" data-role="button"
                         style="text-align:left" data-icon="arrow-r" data-iconpos="right"&gt;Vehicle&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;input id="submit_claim" type="submit" name="send" value="Submit" id="submit"/&gt;
  
              &lt;div id="debug"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"&gt;
              &lt;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"&gt;Done&lt;/a&gt;
              &lt;a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
                 style="float: right; margin-right: 10px; margin-top: 5px"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="page" id="testform_happy" data-theme="f"&gt;
          &lt;div data-role="header"&gt;
              &lt;a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"&gt;&lt;/a&gt;
  
              &lt;h1&gt;Happy Party&lt;/h1&gt;
              &lt;a href="#testform_description" data-icon="arrow-r" data-iconpos="notext"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;label for="happy_initials"&gt;Initials:&lt;/label&gt;
              &lt;input type="text" name="happy_initials" id="happy_initials" value="" class="required"/&gt;
          &lt;/div&gt;
          &lt;div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"&gt;
              &lt;a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
                 style="margin-left: 10px; margin-top: 5px"&gt;Done&lt;/a&gt;
              &lt;a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
                 style="float: right; margin-right: 10px; margin-top: 5px"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="page" id="testform_description" data-theme="f"&gt;
          &lt;div data-role="header"&gt;
              &lt;a href="#testform_happy" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"&gt;&lt;/a&gt;
  
              &lt;h1&gt;Description&lt;/h1&gt;
              &lt;a href="#testform_vehicle" data-icon="arrow-r" data-iconpos="notext"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;label for="incident_date"&gt;Date of Incident:&lt;/label&gt;
              &lt;input type="date" name="incident_date" id="incident_date" value="" class="required"/&gt;
           &lt;/div&gt;
          &lt;div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"&gt;
              &lt;a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
                 style="margin-left: 10px; margin-top: 5px"&gt;Done&lt;/a&gt;
              &lt;a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
                 style="float: right; margin-right: 10px; margin-top: 5px"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="page" id="testform_vehicle" data-theme="f"&gt;
          &lt;div data-role="header"&gt;
              &lt;a href="#testform_description" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"&gt;&lt;/a&gt;
  
              &lt;h1&gt;Vehicle&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;label for="vehicle_registration_number"&gt;Registration Number:&lt;/label&gt;
              &lt;input type="text" name="vehicle_registration_number" id="vehicle_registration_number" value=""
                     class="required"/&gt;
           &lt;/div&gt;
          &lt;div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;"&gt;
              &lt;a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
                 style="margin-left: 10px; margin-top: 5px"&gt;Done&lt;/a&gt;
              &lt;a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
                 style="float: right; margin-right: 10px; margin-top: 5px"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>