Question

所以我看到了一些关于这个主题的帖子，但其中没有一篇似乎适合我（例如：Jquery function doesn't work after Ajax call; JavaScript does not work after you add new elements）所以我再次问它。

我有一些我用_clip_display.html.erb渲染的视频库：

<iframe width="560" height="315" src="//www.youtube.com/embed/<%= clip_to_display %>" frameborder="0" allowfullscreen></iframe>
<% unless desc_to_display.blank? %>
    <p><%= link_to "Description", "#", remote: true, id: "desc-link" %></p>
    <span id="clip-desc">
        <%= desc_to_display %>
    </span>
<% end %>

里面的

<section class="clip">
     <%= render "clips/clip_display" %>
</section>

我使用＆＃34;描述＆＃34;链接以打开和关闭说明。

clips.coffee：

$(document).on "turbolinks:load", ->
  $("#desc-link").on "click", ->
    $("#clip-desc").fadeToggle()

所有这些都可以正常工作，但是如果我使用Ajax删除当前视频并将其替换为新视频，那么＆＃34;描述＆＃34;链接不再起作用：

$("section.clip").empty();
$("section.clip").append("<%= j render "clips/clip_display" %>");

Answer 1

您将click事件添加到元素（描述链接），该事件正在被Ajax成功回调替换。一旦元素被Ajax替换，有限事件将不会触发，因为事件没有再次初始化。所以总是将事件回调绑定到静态父元素，这可以在文档加载时初始化。你可以使用这样的东西。

$(document).on "turbolinks:load", ->
  $("section.clip").on 'click', 'section.clip', ->
    $("#clip-desc").fadeToggle()

Ajax之后Javascript不起作用

1 个答案: