j渲染视图后Javascript不起作用

Posted 2023-05-09

【中文标题】j渲染视图后Javascript不起作用

【英文标题】：Javascript does not work after j rendering a view

【发布时间】：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();
);

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