在 AJAX 调用 Rails 应用程序后使用 js.erb 呈现页面后，HTML 类没有响应 jQuery 操作答案

【问题标题】：HTML class not responding to jQuery action after using js.erb to render page after AJAX call Rails app在 AJAX 调用 Rails 应用程序后使用 js.erb 呈现页面后，HTML 类没有响应 jQuery 操作
【发布时间】：2012-10-25 14:06:19
【问题描述】：

我正在编写一个具有跟随功能的应用程序，这是通过对控制器的 AJAX 调用来完成的。在那次调用之后，我渲染了使用 js.erb 单击的按钮的相反按钮，该按钮渲染了我想要显示的按钮。但是，我的按钮上有悬停功能，单击此按钮后，悬停不再起作用。它是正确的按钮类，但我用来更改按钮状态的 jQuery 不起作用。

这是一些代码，我的 jQuery：

unfollow_button = $(".unfollow-button");
unfollow_button.hover(
    function(){
        $(this).addClass("btn-danger");
        $(this).text("Unfollow");
    }, 
    function () {
        $(this).removeClass("btn-danger");
        $(this).text("Following");
    }
);

这是我的看法：

<% if current_user.following?(f) %>
<%= link_to "Following", user_unfollow_teacher_path(f), :class => "btn unfollow-button", :remote => true %>
<% else %>
<%= link_to "Follow", user_follow_teacher_path(f), :class => "btn btn-primary purple-button", :remote => true %>
<% end %>

这是我使用的 js.erb 文件：

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")

而这个被渲染的部分是：

<%= link_to "Following", user_unfollow_teacher_path(@user), :class => "unfollow-button btn", :remote => true %>

当我单击取消关注时，jQuery 工作正常，然后在我再次关注并将按钮设置为取消关注按钮后，悬停动作停止工作。

任何帮助将不胜感激。

【问题讨论】：

标签： jquery html ruby-on-rails ajax erb

【解决方案1】：

您必须在 js.erb 文件中再次调用该 jquery 代码：

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$(".unfollow-button").hover(
    function(){
        $(this).addClass("btn-danger");
        $(this).text("Unfollow");
    }, 
    function () {
        $(this).removeClass("btn-danger");
        $(this).text("Following");
    }
);

最好不要将代码放在多个位置，因此我通常会设置一个初始化程序，这样我就可以在 .erb 文件中调用相同的代码（下面的代码在咖啡脚本中，但您可以将其转换为 js @987654321 @

init.js.coffee

(myApp, $, undefined_) ->
  myApp.init = myApp.init or {}

  myApp.init.followHover = ->
    $(".unfollow-button").hover(#code here)

) window.myApp = window.myApp or {}, jQuery

$ ->
  myApp.init.followHover()

然后当你在 js.erb 中再次需要它时，只需调用它！

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
myApp.init.followHover()

【讨论】：

太棒了！它可以工作，先使用 hacky 解决方案，然后再重构。

【解决方案2】：

像这样委派您的 javascript 事件。现在 JQUERY 不会在 AJAX 调用后中断，并且在打开 turbolink 的情况下效果很好。

    $(function() {

      $("#follow_form").parent().delegate(".unfollow-button", "mouseover",
        function(){
          $(this).val("Unfollow");
          $(this).addClass("btn-danger");
        }
      );

      $("#follow_form").parent().delegate(".unfollow-button", "mouseout",
        function(){
          $(this).val("Following");
          $(this).removeClass("btn-danger");
        }
      );

    });

【讨论】：

【解决方案3】：

我认为问题在于 jQuery 事件侦听器不知道新插入的 DOM 元素。尝试使用unfollow_button.on('hover', function()...

更多信息：http://api.jquery.com/on/

【讨论】：

您好，感谢您的回复。你的理由是有道理的，我只是不知道我将如何解决这个问题。没有工作:(