Jquery 使Div标签可点击
下面的代码以表格行格式提供了消息列表,我希望使每一行都可以单击。我尝试了所有的建议,但都没能奏效。 由于我无法使整个tr可点击,所以我将i.reason字段设置为可点击临时解决方案Jquery 使Div标签可点击,jquery,ruby-on-rails,jquery-ui,twitter-bootstrap,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= "<
<% 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内的浏览器前端工作——将事件绑定到页面上的元素
下面是如何使用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");
});
这将允许您捕获单击事件。如果您想通过单击执行操作,最好将数据属性添加到行中,如下所示:
<tr class="notifyTable" id= "<%=i.id %>" data-link="http://google.com">
我喜欢这种方法,但我想在单击表行时导航到message_member_pathid:I.id path,类似于我正在按的链接导航到特定对象。我尝试像data link=message_view_member_path,但它作为文本,并且不显示任何路由匹配[GET]/users/message\u view\u member\u path2144,在这种方法中,它不会将鼠标指针显示为可单击的,对吗?它只会显示为指针,用户不知道它是否可点击。
#app/assets/javascripts/application.js
$(document).on("click", ".notifyTable", function(){
window.location.href = $(this).data("link")
});