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

我尝试了以下两个javascript函数，但两者仅适用于第一个侦听器。

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

和

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

但是第一个只是为每个结果打开一个修改，我不能让它只是onclick，第二个只对第一个搜索结果起作用。

我该怎么办？

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

参见文件Jackson serialization: how to ignore superclass properties

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

1 个答案: