Question

我知道这里有多个线程已经在讨论这个问题，但到目前为止发布的建议都没有让我找到解决方案。所以，我会发布自己的。基本上我有一个javascript函数设置为在我的一个页面上运行。在刷新页面之后它才会起作用。我的理解是这个问题与ajax加载页面的方式有关吗？

我尝试过的事情：

将脚本代码添加到用户首先看到的首页布局
当它不起作用时，将脚本代码添加到网站使用的所有3个布局
将脚本添加到此特定布局的主体。

代码如下。在此先感谢您的帮助！

这是布局的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>RENT</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag :application %>
  <%= csrf_meta_tags %>
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <%= stylesheet_link_tag "my.css" %>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <%= javascript_include_tag "my.js" %>
        <script src="/assets/jquery.maskMoney.js" type="text/javascript"></script>

  <!-- THIS IS THE FUNCTION I NEED HELP WITH! -->
  <script type="text/javascript">
    $(function(){
        $("#paymentAmount").maskMoney({symbol:'$ '});
    })
    </script>
</head>
<body>

    <div data-role="page" data-theme="b" id="page4">
          <div data-theme="b" data-role="header">
              <a data-role="button" data-theme="b" href="/home"
               data-icon="back" data-iconpos="left" class="ui-btn-left">
                  Back
              </a>
              <a id="settings" data-role="button" data-inline="true" data-theme="b"
               href="#page9" data-icon="gear" data-iconpos="notext" class="ui-btn-right">
              </a>
              <h3>
                  Pay Rent
              </h3>
          </div>

        <%= content_tag(:div, flash[:error], :id => "flash_error") if flash[:error] %>
        <%= content_tag(:div, flash[:notice], :id => "flash_notice") if flash[:notice] %>
        <%= content_tag(:div, flash[:alert], :id => "flash_alert") if flash[:alert] %>

        <%= yield %>

        <div data-theme="a" data-role="footer" data-position="fixed">
              <h1>
                  © 2013
              </h1>
          </div>
      </div>

</body>
</html>

这是控制器的代码：

<!-- Pay Rent (R) -->
  <div data-role="content" style="padding: 10px">
    <%= form_for(@rentPayment, :url => { action: "create" }) do |f| %>z
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-mini="true">
        <label for="paymentAmount"> Payment Amount </label>
        <input name="rentPayment[paymentAmount]" id="paymentAmount" placeholder="$ 0.00" value="" type="text">
        </fieldset>
      </div>
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-mini="true">
        <label for="paymentDate"> Pay on this date </label>
        <input name="rentPayment[paymentDate]" id="paymentDate" placeholder="" value="" type="date">
        </fieldset>
      </div>
      <input type="submit" data-theme="b" value="Submit Payment" data-mini="true">
    <% end %>
  </div>

已修改的布局页

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>RENT</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag :application %>
  <%= csrf_meta_tags %>
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <%= stylesheet_link_tag "my.css" %>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <%= javascript_include_tag "my.js" %>
        <script src="/assets/jquery.maskMoney.js" type="text/javascript"></script>

  <!-- THIS IS THE FUNCTION I NEED HELP WITH! -->
 <script type="text/javascript">
    $(document).on('pageshow', '#page4', function () { $("#paymentAmount").maskMoney({symbol:'$ '}); });
    <!--$(document).ready(function(){$("#paymentAmount").maskMoney({symbol:'$ '});})-->
  </script>
</head>
<body>

    <div data-role="page" data-theme="b" id="page4">
          <div data-theme="b" data-role="header">
              <a data-role="button" data-theme="b" href="/home"
               data-icon="back" data-iconpos="left" class="ui-btn-left">
                  Back
              </a>
              <a id="settings" data-role="button" data-inline="true" data-theme="b"
               href="#page9" data-icon="gear" data-iconpos="notext" class="ui-btn-right">
              </a>
              <h3>
                  Pay Rent
              </h3>
          </div>

        <%= content_tag(:div, flash[:error], :id => "flash_error") if flash[:error] %>
        <%= content_tag(:div, flash[:notice], :id => "flash_notice") if flash[:notice] %>
        <%= content_tag(:div, flash[:alert], :id => "flash_alert") if flash[:alert] %>

        <%= yield %>

        <div data-theme="a" data-role="footer" data-position="fixed">
              <h1>
                  © 2013
              </h1>
          </div>
      </div>

</body>
</html>

在刷新之前，Javascript不会在jQuery Mobile上运行

0 个答案: