使Div标签可点击

时间:2014-07-15 23:22:18

标签: jquery ruby-on-rails jquery-ui twitter-bootstrap

嗨下面的代码给出了表行格式的消息列表,我想让每一行都可以点击。我已经尝试了所有的建议,但无法使其发挥作用。
由于我无法使整个tr可点击,因此我将i.reason字段设为可点击以作为临时解决方案。

<% if @notifyCount > 0 %>
<table class="table table-hover table-condensed">
<% @notify.each do |i| %>
<tr class="notifyTable" id= "<%=i.id %>">
 <td class="myWidth concat"> 
    <%= image_tag "#{i.incident_image}", style: "height:45px; width:45px; float:left; margin: 0 8px 0 0" %> <b> <%= i.sender.first_name + ' ' + i.sender.last_name %> </b> <br> 
    <div> <%= link_to truncate(i.reason.capitalize, length: 50), message_member_path(id: i.id), style: "text-decoration:none" %> </div>
 </td>
</tr>
<%end%>
</table>
<%else%>
<p style="opacity:0.7;text-align:center;margin-top:5px"> No Unread Messages ...</p>
<%end%>

1 个答案:

答案 0 :(得分:0)

<强> JS

你必须使用Javascript来完成这项工作

Javascript(和JQuery)基本上适用于浏览器的前端(在DOM - Document Object Model内),以将事件绑定到页面上的元素。

以下是使用JQuery创建div“clickable”的方法:

#app/assets/javascripts/application.js
$(document).on("click", ".div", function() {
   // Your Action Here
});

-

关于问题的具体细节,您可能需要查看以下代码:

#app/assets/javascripts/application.js
$(document).on("click", ".notifyTable", function(){
   alert("Row is clicked");
});

这将允许您捕获click事件。如果您希望使用该点击执行操作,最好将data属性添加到row,例如:

<tr class="notifyTable" id= "<%=i.id %>" data-link="http://google.com">

这将允许您这样做:

#app/assets/javascripts/application.js
$(document).on("click", ".notifyTable", function(){
   window.location.href = $(this).data("link")
});