link_to_add 和 link_to_remove - 动态点击它们答案

【问题标题】：link_to_add and link_to_remove - clicking on them dynamicallylink_to_add 和 link_to_remove - 动态点击它们
【发布时间】：2014-07-19 03:10:20
【问题描述】：

我正在使用 gem https://github.com/ryanb/nested_form，并且我有一个具有 accepts_nested_attributes_for 的模型。虽然效果很好，但有时我希望能够在页面上添加/删除（主要是添加）一个始终通过按钮添加/删除的表单：

.row
  #tasks
    = f.fields_for :tasks do |task_form|
      ..............

      = task_form.link_to_remove "Remove", class: "btn btn-danger"
      = f.link_to_add  "Add task", :tasks, class: "btn btn-default", data: { target: "#tasks" }

换句话说，我想动态地单击link_to_add 和link_to_remove（不是通过鼠标），可能是通过调用应该存在于nested_form gem 中的方法。当然，我可以通过 javascript 通过 触发按钮的点击事件 来实现，但我的直觉告诉我必须有一种更简单、更自然的方式来做到这一点。有吗？

更新：

当然，我可以使用 javascript。我对按钮的触发单击事件不太满意，因为nested_form 中必须有一种更简单和标准的方式。

【问题讨论】：

并非如此。基本上，如果您不想刷新页面来执行此操作，那么您在浏览器中所拥有的就是 JavaScript。
顺便说一句，使用cocoon gem 可能会更好——我相信它与nested_form 的工作非常相似

标签： javascript jquery ruby-on-rails gem nested-forms

【解决方案1】：

我不太确定您要在这里完成什么。一方面你说你想动态地做，但同时你不想使用 JavaScript。对我来说听起来很矛盾。

无论如何，如果您在 new 方法中这样做：

def new
  @to_do = ToDo.new
  @to_do.tasks.build
end

然后在您的form 中，您将在页面加载时显示一组任务字段，而无需单击add 按钮。

我不知道这是你要找的，还是别的什么。

PS：我看不出 JavaScript 有什么不自然的地方。您正在使用的这个 gem 完全依赖于 JavaScript。

更新

现在您已经更新了您的问题。我建议阅读 gem 的源代码并找出绑定到按钮单击事件的函数。然后，您可以将相同的函数绑定到您喜欢的任何事件。

说了这么多，我们来看看这个文件：

https://github.com/ryanb/nested_form/blob/master/vendor/assets/javascripts/jquery_nested_form.js

查看最后几行。添加按钮点击事件绑定到nestedFormEvents.addFields函数。继续并将您的事件绑定到此函数，您不必触发按钮单击。

【讨论】：

点击“添加新任务”按钮会在页面上添加一个新表单，对吧？假设我希望它也被另一个事件添加。怎么样？
任何类似的东西都必须使用 JavaScript。但是您不想使用 JavaScript 的要求令人困惑。您可以使用 jquery 轻松模拟按钮单击（无需单击鼠标），如下所示：$('#button-id').click();。将 this 放入一个函数中，并将该函数绑定到您喜欢的任何事件。
我没有说我不想使用javascript。
这就是我所说的：我可以触发点击事件但是......？我更新了我的问题。
谢谢，我看了一下。但是“什么”我必须调用“addFields”函数on？

【解决方案2】：

DOM

正如San 所提到的，此解决方案的javascript 元素将始终存在（已经存在）；所以这个是否在 JS 中完成的问题应该是“我该怎么做？”

坦率地说，我并不完全理解你到底想要做什么 - 如果这个答案看起来有点宽泛，请道歉:)

底线是您的答案完全取决于DOM (document object model) - 这是基本上您加载的 HTML 页面，然后您的浏览器将“消化”

众所周知，Javascript 位于 DOM 之上，通过绑定事件到这些元素，您可以与页面上的各种元素进行交互。

每次您在页面上动态更改某些内容（“不刷新”）都是通过 Javascript 对 DOM 的操作来完成的。这意味着，如果您希望在不重新加载页面的情况下操作 DOM，您将必须在路径的某处使用 Javascript

建议

你提到你想“点击链接dynamically”——你到底是什么意思？

如果您想从表单中加载/删除元素，您需要使用 Ajax 从控制器加载表单元素，或复制具有不同 ID 的元素（我认为 @ 987654328@ 无论如何都会这样做）

如果您提供有关您希望实施的用例的详细信息，将会很有帮助。从我所看到的 - 我猜你正在寻找如果满足某些参数（例如单击复选框）添加文件？

【讨论】：