[英]Make Div tag clickable
嗨,下面的代码为我提供了表格行格式的消息列表,我希望每一行都可单击。 我已经尝试了SO中的所有建议,但未能使其奏效。
由于我无法使整个tr
i.reason
单击,因此我将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%>
JS
您必须使用Javascript才能完成这项工作
Javascript(和JQuery)基本上在浏览器的前端(在DOM
- Document Object Model内 )工作,以将事件绑定到页面上的元素。
使用JQuery将div设为“可点击”的方法如下:
#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");
});
这将允许您捕获单击事件。 如果您想通过单击来执行操作,则最好将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")
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.