JavaScriptを使用した検索結果のOnclickイベント

Question

私は検索結果のリストを持っており、それぞれのコンテンツをクリックしてコンテンツを表示できるようにしたいと考えています。これまでのところ私のコードはこのように見えます。

<% @found.each do |f| %> 
    <div class="col-sm-3 motion-box" > 
     <div class="motion-content" id="preview"> 
      <h4>role: <%= f.role %></h4> 
       <p>mood: <%= f.mood %><br/> 
        description: 
        <% f.param.each do |a| %> 
         <%= a %> 
        <% end %></p> 
      <div> 
       <button class="btn btn-default btn-sm">BVH</button> 
       <button class="btn btn-default btn-sm">C3D</button> 
       <button class="btn btn-default btn-sm">FBX</button> 
      </div> 
     </div> 
    </div> 
<% end %> 

次の2つのjavascript関数を試しましたが、どちらも最初のlistelementでのみ動作します。

<script type="text/javascript"> 
     $(".motion-content").each(function() 
     { 
      alert("Achtung"); 
     }); 
</script> 

と

document.getElementById("preview").onclick = function() { 
    alert("Achtung!"); 
} 

しかし、最初のものは、単にすべての結果のために、ALTERを開き、私はそれだけのonclickそれを行うために取得カント2つ目は、最初の検索結果に取り組んでいます。

どうすればよいですか？

Answer 1

//this will add click listener on each conform '.montion-content' CSS selectors element 
$('.motion-content').on('click', function() { 
    alert('clicked'); 
}); 

/*this will add click listener on [parentDom] 
and if this element conform to the 
CSS selectors '.montion-content' will call the function*/ 
$('[parentDom]').on('click', '.motion-content', function() { 
    alert('clicked'); 
}); 

はあなたが同じIDを持つ複数の要素を持つことができません文書here