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

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に変換できます）

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 イベントを委任します。これで、AJAX 呼び出しの後で JQUERY が壊れることはなくなりました。これは、ターボリンクをオンにしてもうまく機能します。

    $(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 に答える