• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

jquery 来源:Hugs 5次浏览

我正在编写一个具有以下功能的应用程序,并且这是通过对控制器的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() 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)