Railsからdivascid/coffeescriptに動的に生成されたdiv idを渡す

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 %> 

私はCoffeeScriptの/ javascriptの側で動的に生成されたのdiv idをキャッチする必要があります：

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

しかし、私はこれを取得することができませんよ作業。

一方、私はこのように、「.closets（）」のようなものを使用して同じ結果を達成することができるかもしれない：

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

しかし、私は、これはどちらか動作させることはできません。それはかなり簡単な作業であるようですが、私はこれを動作させるにはあまりにも不慣れなjavascriptです。これらの動的に生成されたdivをJavaScript側で捕捉するにはどうすればよいですか？どんな助けも非常に高く評価されるでしょう。

Answer 1

レールから動的に生成div年代をキャプチャするためには、通常、次の操作を行います：

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

DOMへゆえの変更、querySelectorAllは生きていけないされていること、しかし、心に留めてますしてください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 
    }); 
}); 

これは良いベースラインを与えるはずです。どのように行動してほしいかを教えてください。

Answer 2

この場合に気になるDIVだけが「説明」のクラスを持つ場合は、jQuery's live functionを使用できます。

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

descriptionクラスを持つ新しいアイテムが作成されると、そのクリックイベントのjQueryコードが取得されます。