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

【问题标题】：Pass dynamically generated div id's from Rails to javascript/coffeescript将动态生成的 div id 从 Rails 传递到 javascript/coffeescript
【发布时间】：2012-03-17 07:47:30
【问题描述】：

我有一个项目列表，我想通过单击按钮或链接在项目名称下显示每个项目的更详细描述。例如，一个非常简单的实现是使用 .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？任何帮助将不胜感激。

【问题讨论】：

标签： javascript ruby-on-rails dynamic html coffeescript

【解决方案1】：

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

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

但请记住，querySelectorAll 不是实时的，因此对 DOM 的任何更改都不会反映在 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
  });
});

这应该会给你一个很好的基线。让我确切地知道您希望它的行为方式。

【讨论】：

抱歉耽搁了。我真的希望这能奏效，但不知何故，它没有。 html 看起来像这样：
抱歉耽搁了。我真的希望这能奏效，但不知何故，它没有。该 html 是具有类“产品”的 div 列表，每个包含类“产品名称”的 div、类“描述”的 div 和按钮。这个想法是每个产品的“描述”div可以单独显示或隐藏按钮。希望这能让事情更清楚。
尼克，如果放在内联中，这会完美地工作，所以它一定是其他（不）发生的事情。谢谢！

【解决方案2】：

如果在这种情况下只有您关心的 DIV 会有一个“描述”类，您可以使用jQuery's live function。它看起来像这样：

$('.descriptions').live("click", function() { ... });

因此，无论何时形成具有描述类的新项目，它都会为其单击事件获取该 jQuery 代码。

【讨论】：