Javascript 使用AJAX但仍然允许$（document）.ready在Rails中

我有以下文件：

layouts/application.html.erb

<div class="container">
  <br>
  <%= flash_messages %>
  <%= yield %>
  <script type="text/javascript">
    $(document).ready(function() {
      $('select').each(function(idx, elem) {
        var $elem = $(elem);
        $elem.select2();
      });

      <%= yield :document_ready %>
    });
  </script>
</div>

并创建了以下文件：

user_transactions/index.js.erb    
document.getElementById('dashboard-body').innerHTML = 
  '<%= escape_javascript(render(:file => "user_transactions/index.html.erb")) %>'

user\u事务/index.js.erb
document.getElementById（'dashboard-body'）。innerHTML=
“'user_transactions/index.html.erb”））%>”

我使用：remote=>true选项调用页面。我不知道它是否好，但它是有效的，我在这里发现了这种技术：

然而，我面临的一个问题是，所有javascript代码都不再工作了。需要运行select2（在布局中），但也有在view index.html.erb本身（datepicker）中声明的部分

---

如何既保留javascript，又保留ajax和fast界面？

我有两个错误的猜测和几个问题：

当您使用：remote=>true调用页面时，是否已验证页面上是否存在JS？那么，你到底是从哪里调用该页面的

我怀疑您的脚本可能不在页面上，因为您指定了错误的布局，因此application.html.erb文件中没有任何内容可用，除非您是从使用应用程序布局的页面调用它

我还认为部分情况是，当你呈现

innerHTML

时，你会拉入所有的代码，但是JS实际上不会再次执行，因此

document.ready

中的脚本不知道你添加到页面中的新内容。设置

innerHTML

后，您必须再次调用JS

您可以将

。每个
封装在一个函数中，并在
文档上调用它一次。准备好
并在填充
innerHTML
后再次调用它

这里有一个类似的问题，有更好的解释：

我希望我在正确的轨道上。
找到了解决方案

JavaScript出现在文档中，因为我从使用应用程序布局的页面调用它。但是，它不会调用document.ready，更重要的是，一旦调用document.ready（因此是第一次），事件就会取消绑定

为了保持溶液干燥，我这样解决：

我为document.ready部分中需要执行的每个javascript函数创建了部分。我更改了layouts/application.html.erb文件以使用这些部分（或者至少是我希望在每个表单上使用的部分），并在user_transactions/index.js.erb中调用了我需要的部分

所以我在index.js.erb中添加了这个部分

$(document).ready(function() {
  <%= render(:partial => "shared/select2") %>
  <%= render(:partial => "shared/datepicker") %>
});

$（文档）.ready（函数（）{
“共享/选择2”）%%>
“共享/日期选择器”）%%>
});
我想知道ERB是否不喜欢
标记在
之外？JavaScript控制台中是否有错误？@IanAtkin ERB只是一个包含ruby标记的文本。在本例中，该文本恰好被格式化为HTML格式。ERB根本不关心HTML的结构。事实上，它很高兴让你彻底搞乱了。是的，JS出现在页面上，因为我确实是在使用应用程序布局的页面上调用它的。事实上，JS不再被调用。
user_transactions/index.js.erb    
document.getElementById('dashboard-body').innerHTML = 
  '<%= escape_javascript(render(:file => "user_transactions/index.html.erb")) %>'

$(document).ready(function() {
  <%= render(:partial => "shared/select2") %>
  <%= render(:partial => "shared/datepicker") %>
});