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 %>

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

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

4

2 回答 2

2

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

看起来您不需要 AJAX 调用中的任何动态内容。您可以从 link_to 帮助器中删除“remote: true”选项，只需将 index.js.erb 的内容放在 index.html.erb 中（可能在底部或 :script 内容块中）

我通常不会最终使用远程助手的东西，但是，把它想象成一个 AJAX 调用，你想对一个动作发出请求，处理它，并返回一些关于发生了什么的信息

于 2012-10-19T14:29:26.253 回答
1

所以这里发生的事情如下：

您单击向#index 控制器操作发送请求的链接之一。这将返回 index.js.erb。

第一次返回时，什么都没有发生，因为 JS 刚刚加载，所以就 JS 而言，还没有发生任何事情。您需要添加一些内容，index.js.erb以便在最初加载 JS 时调用附加操作。

至于同时出现的两种形式，您可能必须更具体地确定要附加的内容。当您调用 append 时，您似乎同时选择了这两个类。也许您可以index.html.erb在问题中包含更多内容。

于 2012-10-18T17:07:36.283 回答