javascript - 将动态生成的 div id 从 Rails 传递到 javascript/coffeescript

Question

我有一个项目列表，我想在单击按钮或链接时在项目名称下显示每个项目的更详细描述。例如，一个非常简单的实现是使用 .toggle()。在 Rails 中，我有这样的描述:

<% @products.each do |product| %>
    <%= div_for(product, :class => "descriptions") do %>
        <%= product.description %>
    <% end %>
    <input type="button" id="button_<%= product.id %>" value="Show/hide" />
<% end %>

我必须在 javascript/coffeescript 端捕获动态生成的 div id:

jQuery ->
$('#button_?????').click ->
    $('#product_ ????').toggle()

但是，我无法让它工作。

另一方面，我也许可以使用类似“.closets()”的方法实现相同的结果，如下所示:

jQuery ->
$('#button').click ->
    $('#button').closest('.descriptions').toggle()

但是，我也无法让它工作。这似乎是一项相当简单的任务，但我对 javascript 的经验太少，无法让它发挥作用。如何在 javascript 端捕获这些动态生成的 div？非常感谢任何帮助。

Answer 1

为了从 Rails 中捕获动态生成的 div，您通常会执行以下操作:

var divs = document.querySelectorAll('.descriptions');

不过请记住，querySelectorAll 不是实时的，因此对 DOM 的任何更改都不会反射(reflect)在 NodeList 中。

正如@MrDanA 所建议的，jQuery 对此有一个很好的解决方案。但是，click 处理程序需要在按钮上而不是描述上。此外，live 已被弃用。它需要替换为 on。

$('.descriptions').each(function(){
  var $this = $(this);
  var button = $this.next(); // assuming that the button is the next sibling
  button.on('click', function(e) {
    $this.toggle();
    e.preventDefault(); // to prevent page from jumping to the top of the page
  });
});

这应该为您提供一个良好的基线。让我确切知道您希望它如何表现。