title: jquery mobile mvc 3 layout an partial views
body: <p>I have a project in .net with mvc 3, I'm trying to implement jquery mobile but I have some issues with custom js, here is part of the code of the _Layout.Mobile.cshtml</p>
  
  <pre><code>&lt;body&gt;
  &lt;div data-role="page" id="div_layout"&gt;
  &lt;div data-role="header"&gt;
      &lt;a href="/" data-icon="home"&gt;Inicio&lt;/a&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
      @Html.Partial("_LogOnPartial")
      @RenderBody()
  &lt;/div&gt;
  &lt;div data-role="footer"&gt;
      &lt;h4&gt;Footer text&lt;/h4&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;...&lt;/script&gt;   
  &lt;script type="text/javascript" src= "@Url.Content("~/Content/js/utilities.js")"&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The result html is (image link):</p>
  
  <p><a href="http://i.imgur.com/1rQyx.png" rel="nofollow">http://i.imgur.com/1rQyx.png</a></p>
  
  <p>The _LogOnPartial partial view use some functions in the utilities.js file, the thing is that this js file must be after the partial view, if not it doesnt work, until here everything's fine, but when I submit forms in the body section all the code in data-role="content" is duplicated and placed at bottom, here's the html result (image link):</p>
  
  <p><a href="http://i.imgur.com/inCEs.png" rel="nofollow">http://i.imgur.com/inCEs.png</a></p>
  
  <p>so the content in the _LogOnPartial partial view stops working, the config file has ajaxEnabled: true, when I disable the ajax everything works fine but I'd like to use the jq mobile transitions, also I could not show loading message with ajaxEnabled: false, Could Somebody help to workaround this? thanks in advance.</p>
  
  <p>Ok thanks for the answer, the _LogOnPartial partial view code is</p>
  
  <pre><code>&lt;div id = "loginbox"&gt;
      &lt;div class="User"&gt;
          &lt;label for="login_user"&gt;Usuario:&lt;/label&gt;
          &lt;input id="login_user" name="login_user" type="text" required id="basic" value="" data-mini="true" /&gt;
      &lt;/div&gt;
      &lt;div class="Password"&gt;
          &lt;label for="login_password"&gt;Contraseña:&lt;/label&gt;
          &lt;input id="login_password" name="login_password" type="password" required id="basic" value="" data-mini="true" /&gt;
      &lt;/div&gt;
      &lt;div class="boton_login"&gt;
          &lt;button type="submit" id="login" data-theme="a"&gt;Login&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="login_error_message"&gt;
          &lt;span id="login_error_message_desc"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>part of the content of utilities.js is</p>
  
  <pre><code>$("#login").click(function () {
      alert('this never happens');
      //something
  });
  </code></pre>
  
  <p>when the page load for the first time it works fine, but then it stops working (when the ajax duplicate the content)</p>