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

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

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

因此，每当形成具有描述类的新项时，它将获得其click事件的jQuery代码。

Answer 2

为了从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
  });
});

这应该给你一个很好的基线。让我确切地知道你希望它如何表现。

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

2 个答案: