2

我正在编写一个具有以下功能的应用程序，这是通过对控制器的 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 工作正常，然后在我再次关注并将按钮设置为取消关注按钮后，悬停动作停止工作。

任何帮助将不胜感激。

4

3 回答 3

3

您将不得不在文件中再次调用该 jquery 代码js.erb：

$("#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 文件中调用相同的代码（下面的代码在 coffeescript 中，但您可以在此处将其转换为 js

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()
于 2012-10-25T17:05:02.767 回答
1

像这样委托你的javascript事件。现在 JQUERY 在 AJAX 调用后不会中断，并且在打开 turbolinks 的情况下可以很好地工作。

    $(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");
        }
      );

    });
于 2015-03-11T13:24:58.157 回答
0

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

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

于 2012-10-25T15:49:42.487 回答