使用javascript对搜索结果执行Onclick事件

我有一个搜索结果列表，希望能够单击其中的每一个以在其他位置显示其内容。到目前为止，我的代码是这样的

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

但是第一个只是为每个结果打开一个alter，我不能让它只点击一次，第二个只对第一个搜索结果有效

我能做什么

//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的元素。此外，您似乎打算在第一个（jQuery）示例中使用

单击
，而不是
每个
@Ryan使用我获得的id。这就是为什么我放弃了那个。但是我从来没有真正使用过jQuery，所以我不知道如何使用它。你能给我举一个代码示例吗？不能有多个元素具有相同的id。而且，看起来你想在第一个（jQuery）示例中使用
单击
，而不是
每个
@Ryan使用我得到的id。这就是为什么我放弃了那个。但是我从来没有真正使用过jQuery，所以我不知道如何使用它。你能给我举个代码例子吗？
document.getElementById("preview").onclick = function () {
    alert("Achtung!");
}

//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');
});