Question

我有一个私人消息系统，显示所有收到消息的“收件箱”视图。此视图只是通过在视图中使用块创建的多个表行生成的。

我想让每个表行“可点击”并传递一个参数（就像我使用标准的link_to一样）。但是，正如您可能知道的那样，您无法使用div来制作可点击的视频。

因此，我相信解决方案需要一些简单的jQuery。我已经找到了这个问题的部分答案，但不是一个完整的答案。

我知道下面的代码不正确（link_to部分），但有人可以告诉我如何使用jQuery点击功能连接rails link_to链接吗？

谢谢！

$('tr').click(function() {
  <%= link_to :controller => "messages", :action => "show", :id => msg.convo_id %>
});

Answer 1

这是我发现的http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/，它似乎完美无缺（注意：'conver'是每个表行的类名。）

$('.conver').click(function() {
  var href = $(this).find("a").attr("href");
  if(href) {
    window.location = href;
  }
});  // end

此外，我的“收件箱”视图在每行中都有复选框，用于选择特定邮件并触发某些选项，例如保存，删除等。我需要能够检查这些复选框而不启动链接到信息。因此，我添加了以下代码：

$(':checkbox').click(function(event) {
  event.stopPropagation();
 });  // end

希望这有助于任何人尝试生成大多数邮件系统常见的相同功能。

Answer 2

添加到您的JS文件：

<script type="text/javascript">
 $(function() {        
    $("tr[data-link]").click(function() {
      window.location = this.dataset.link
    });
 });
</script>

添加指向视图文件的链接：

<tr data-link="<%= edit_coaches_payment_path(payment) %>"> <td>#content Here</td></tr>

Answer 3

除此之外，如果您使用大量的ajax调用，您可能希望执行允许添加和删除行而不会破坏事件的操作。您可以将事件绑定到两个项目的表对象。

$("table.conver-table").on("click", "tr", function() {
  var href = $(this).find("a").attr("href");
  if(href) {
    window.location = href;
  }
});  // end

$("table.conver-table").on('click', ':checkbox', function(event) {
  event.stopPropagation();
 });  // end

Rails 3 - 如何使用jQuery使整个表行可单击

3 个答案: