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

问题描述：

我有一个项目列表，我希望通过单击按钮或链接在项目名称下面显示每个项目的更详细描述。例如，一个非常简单的实现将使用.toggle（）。在Rails我有这样的描述：将动态生成的div ID从Rails传递到javascript/coffeescript

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

我会赶上动态生成的div的ID在的JavaScript/CoffeeScript的一面：

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

但是，我无法得到这个工作。

在另一方面，我也许能使用类似来完成相同的结果“.closets（）”，像这样：

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

但是，我不能得到这个工作的。这似乎是一个相当简单的任务，但我只是太无经验的JavaScript来让这个工作。如何在JavaScript端捕获这些动态生成的div？任何帮助将非常感激。

答

为了从Rails的捕捉动态生成div的，你通常会做以下几点：

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

请记住，虽然，querySelectorAll不活，因此对DOM的任何更改将不会反映在NodeList。

jQuery有一个很好的解决方案，就像@MrDanA的建议。但是，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看起来像这样： – 2012-02-27 22:15:04

对不起，延迟。我真的希望这个工作，但它不，不知何故。 html是包含class“products”类的div的列表，每个类包含“product-names”类的div，类“descriptions”的div和按钮。这个想法是，每个产品的“说明”div可以单独显示或隐藏按钮。希望这可以让事情更清楚。 – 2012-02-27 22:25:19

尼克，如果把它放在内联，这个工作是完美的，所以它必须是别的（不）继续。谢谢！ – 2012-02-27 23:15:30

答

如果只有你关心在这种情况下div一定有一个类“说明”中，你可以使用jQuery's live function。它应该是这样的：

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

所以每当形成与描述类的新项目，将获得它的点击事件jQuery代码。

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

相关推荐