title: jQuery Mobile bind events
body: <p>I have a little problem with jquery mobile. always my page is called this function runs.</p>
  
  <pre><code>$(document).bind('pagechange', function () { 
    // peforms ajax operations
  })
  </code></pre>
  
  <p>The problem is that each time my page is viewed it increases the times my ajax is called... example: if the page is viewed 5 times, next time will peform the same ajax request 6 times.</p>
  
  <p>I'm using asp.Net MVC 4.</p>
  
  <p><img src="https://i.stack.imgur.com/h5GpW.png" alt="Multiple ajax requests"></p>
  
  <p>Full code:</p>
  
  <pre><code>@{
      //ViewBag.Title = "Consulta";
      Layout = "~/Views/Shared/_LayoutMenu.cshtml";
  }
  &lt;div class="ui-body ui-body-b" id="test"&gt;
      (...) some html code (...)
  &lt;/div&gt;
  &lt;script&gt;        
  $(document).bind('pagechange', function () {
      $('#info').css('visibility', 'hidden');
  
      $('#name').keypress(function (e) {
  
          if (e.keyCode == 13) {
  
              var code = $(this)[0].value;
  
              $.ajax({
                  url: '/Consulta/ObterDadosPulseira',
                  data: $(this).serialize(),
                  success: function (data) {
  
                      $('#info').css('visibility', 'visible');
  
                      var info = $('#info')[0];
  
                      $('#info [id=gridCod]').html(data[0].cod);
                      $('#info [id=gridName]').html(data[0].nome);
  
                  },
                  complete: function () { },
                  error: function () { alert('error!'); }
              });
  
              $(this)[0].value = '';
          }
      });
      $('#name').focus();                       
  });
  </code></pre>
  
  <p></p>