j渲染视图后Javascript不起作用答案

【问题标题】：Javascript does not work after j rendering a viewj渲染视图后Javascript不起作用
【发布时间】：2017-02-27 20:53:24
【问题描述】：

当我使用远程调用和 *js.erb 文件将内容动态更新到页面时，如下所示：

add_content.js.erb

$("#new_content").html('<%= j render("content") %>');

要呈现这样的视图： _content.html.erb

<div class="name">
    <%= @content.name %>
</div>
<div class="text">
    <%= @content.text %>
</div>

使用这样的 javasript 文件： application.js

$( document ).ready(function() {
    ...
    $(".name").on('click', function(){
      $(".text").slideToggle();
    });
    ...
})

... javascript slideToggle() 未执行。当我这样做时

<%= render("content") %>

在任何视图（没有 js.erb）中，一切都按预期工作，并且 slideToggle() 工作。这只是一个简单的示例，它与 slideToggle 无关，甚至 alert("...") 等都不起作用。

所以我的问题是为什么没有执行 javascript？这与任何装载顺序有关吗？我需要重新初始化一些东西吗？

【问题讨论】：

【解决方案1】：

你试过了吗

$( document ).ready(function() {
    //your code here;
})

【讨论】：

【解决方案2】：

如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，更多详细信息请参考此 api 文档，http://api.jquery.com/on/

在您的 application.js 中尝试这样 ....

$('#new_content').on('click', '.name', function() {
  $(".text").slideToggle();
});

希望这对你有用........谢谢！

【讨论】：