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

Z时代
2024-01-10
分类：问答

我正在编写一个具有以下功能的应用程序，并且这是通过对控制器的AJAX调用完成的。在那次调用之后，我渲染了使用js.erb单击的按钮的相反按钮，该按钮呈现我想要显示的按钮。但是，我在按钮上有一个悬停功能，单击此按钮后，悬停不再起作用。这是正确的按钮类，但我用来改变按钮状态的jQuery不起作用。在AJAX调用Rails应用程序后使用js.erb呈现页面后，jQuery动作没有响应的HTML类

下面是一些代码，我的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工作正常，然后再次关注并将按钮设置为取消关注按钮，悬停操作停止工作。

任何帮助，将不胜感激谢谢。

回答：

你将不得不在你的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文件中的相同代码（以下代码位于coffeescript中，但您可以将其转换为js here

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()

回答：

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

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

回答：

委托你的JavaScript这样的事件。现在JQUERY不会在AJAX调用之后中断，而且这种工作方式在涡轮链接打开的情况下效果很好。

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