1

私は次のものを持っていますindex.js.erb：

$(function () {
  var $team = $('#createTeam'),
      $user = $('#createUser'),
      $userPanel = $('.createUserPanel'),
      $teamPanel = $('.createTeamPanel');

  $user.click(function(){
    $userPanel.append('<%= j render 'form_user' %>').fadeIn('slow');
    $(this).fadeOut();
  });

  $team.click(function(){
    $teamPanel.append('<%= j render 'form_team' %>').fadeIn('slow');
    $(this).fadeOut();
  });
})();

私のこれらのリンクと一緒に行くにはindex.html.erb：

<%= link_to "+", "#", 'data-action' =>"create",'data-target'=> "team", id: "createTeam", remote: true %>

<%= link_to "+", "#", 'data-action' =>"create",'data-target'=> "user", id: "createUser", remote: true %>

どちらかのリンクを最初にクリックしても何も起こりませんが、2回目と3回目のクリックで両方のフォームが表示されます。リンクをクリックするたびに、ボタンがフェードアウトし、フォームが別のdivに表示されます。

望ましい実装は、いずれかのリンクをクリックするform_*とが表示され、ボタンがフェードアウトすることです。どうすればこれを達成できますか？

4

2 に答える 2

2

問題は、JavaScriptを呼び出してからロードし、イベントを要素にバインドすることです。これが、2回目のクリックが機能する理由です。クリックイベントは、ロードされるJavaScriptを「呼び出す」最初のクリックの後にバインドされます。

AJAX呼び出しから動的なものは何も必要ないようです。link_toヘルパーから「remote：true」オプションを削除し、index.js.erbのコンテンツをindex.html.erb（おそらく下部または：scriptコンテンツブロック）に配置するだけです。

私は通常、リモートヘルパーのものを使用することはありませんが、AJAX呼び出しのように考えて、アクションをリクエストし、処理して、何が起こったかに関する何らかの情報を返したいと考えています。

于 2012-10-19T14:29:26.253 に答える
1

したがって、ここで起こっていることは次のとおりです。

#indexコントローラーアクションにリクエストを送信するリンクの1つをクリックします。これにより、index.js.erbが返されます。

初めてこれを返すときは、JSがロードされたばかりなので何も起こりません。JSに関する限り、まだ何も起きていません。index.js.erbJSが最初にロードされたときに追加アクションを呼び出す何かを追加する必要があります。

同時に表示される両方のフォームに関しては、何に追加するかについてより具体的にする必要がある場合があります。appendを呼び出すときに、両方のクラスを選択しているようです。おそらく、あなたはindex.html.erbあなたの質問にもっと多くを含めることができます。

于 2012-10-18T17:07:36.283 に答える