jquery - rails :remote => true operating on document object?

Question

我有以下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 %>

当我第一次单击任一链接时，没有任何反应，但连续第二次和第三次单击时，两种形式都会出现。每次单击链接后，按钮应淡出，并且表单应显示在单独的 div 中。

所需的实现是，当单击任一链接时，将出现form_*，并且该按钮将淡出。我如何实现这一目标？

Answer 1

问题是您正在调用 javascript，然后加载该 javascript 并将事件绑定(bind)到您的元素。这就是第二次点击起作用的原因——点击事件在第一次点击之后绑定(bind)，“调用”要加载的 javascript。

看来您不需要 AJAX 调用中的任何动态内容。您可以从 link_to 帮助程序中删除“remote: true”选项，然后将 index.js.erb 的内容简单地放置在 index.html.erb 中(可能位于底部或 :script 内容 block 中)

我通常不会最终使用远程帮助程序，但是，将其想象为 AJAX 调用，您想要向操作发出请求，对其进行处理，然后返回有关所发生情况的某种信息