Rails中的link_to方法和click事件

72

如何创建此类型的链接：

<a href="#" onclick="document.getElementById('search').value=this.value">

link_to在Rails中使用方法？

我无法从Rails文档中弄清楚。

ruby-on-rails ruby

— 尤德
source

1

除非您只是为了简洁起见就离开了“＃”，否则使用link_to似乎没有多大意义。为什么不像上面所做的那样仅使用带有onclick设置的标记。

— 布赖恩2009年

191

您可以使用link_to_function（在Rails 4.1中删除）：

link_to_function 'My link with obtrusive JavaScript', 'alert("Oh no!")'

或者，如果您绝对需要使用link_to：

link_to 'Another link with obtrusive JavaScript', '#',
        :onclick => 'alert("Please no!")'

但是，将JavaScript正确地放入生成的HTML中是很麻烦的，而且是不明智的做法。

相反，您的Rails代码应该只是这样的：

link_to 'Link with unobtrusive JavaScript',
        '/actual/url/in/case/javascript/is/broken',
        :id => 'my-link'

并假设您使用的是Prototype JS框架，那么您的JS就像这样application.js：

$('my-link').observe('click', function (event) {
  alert('Hooray!');
  event.stop(); // Prevent link from following through to its given href
});

或者，如果您使用的是jQuery：

$('#my-link').click(function (event) {
  alert('Hooray!');
  event.preventDefault(); // Prevent link from following its href
});

通过使用第三种技术，可以确保如果用户不可用JavaScript，则链接将继续进入其他页面，而不仅仅是无声地失败。请记住，JS可能不可用，因为用户的互联网连接不佳（例如，移动设备，公共wifi），用户或用户的sysadmin禁用了它，或者发生了意外的JS错误（即，开发人员错误）。

— Ron DeVera
source

link_to_function并未被删除，而是在Rails 3中引入的。我想您的意思是link_to_remote。

— dimir，2012年

link_to_function从Rails 1.0开始就已经存在了，但是您没错，它并未被删除；不推荐使用（然后不推荐使用，然后再翻转几次）。我将更新我的答案。谢谢！

— 罗恩·德维拉

如果我有一个股票清单，并且想做类似的事情。如何将股票代码输入点击功能？

— 泽维尔·约翰

25

如果使用JQuery并将其放在application.js或head部分中，以跟进Ron的答案，则需要将其包装在ready（）部分中...

$(document).ready(function() {
  $('#my-link').click(function(event){
    alert('Hooray!');
    event.preventDefault(); // Prevent link from following its href
  });
});

— 吉姆·莫里斯（Jim Morris）
source

3

请注意，可以将其缩短为$(function() { ... });，即等于$(document).ready(function() { ... });

— Confusion 2015年

顺便说一句，jQuery 3.0建议使用$(function() { // Handler for .ready() called. });而不是$（document）.ready（）

— alexventuraio

2

对于带有Turbolinks的rails 5，请使用：$（document）.on（'turbolinks：load'，function（）{

— Brad

8

只是使用

=link_to "link", "javascript:function()"

— 王磊
source

1

另一个解决方案是捕获onClick事件，并将数据汇总到js函数中，您可以

.hmtl.erb

<%= link_to "Action", 'javascript:;', class: 'my-class', data: { 'array' => %w(foo bar) } %>

.js

// handle my-class click
$('a.my-class').on('click', function () {
  var link = $(this);
  var array = link.data('array');
});

— 华金·迪亚兹（Joaquin Diaz）
source