Rails中的link_to方法和click事件

Question

我要如何创建这种类型的链接：

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

如何在Rails中使用方法link_to？

我从Rails文档中找不到答案。

- Yud

---

除非您只是为了简洁而将“#”留下，否则使用link_to似乎没有什么意义。为什么不像上面所做的那样使用onclick设置为a标签呢？ - Brian

Answer 1

你可以使用 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框架，则在application.js中可以使用以下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）、用户或用户的系统管理员禁用它，或者出现意外的JS错误（即开发人员错误）。

- Ron DeVera

---

link_to_function在Rails 3中并没有被移除，而是被引入了。我猜你想说的是link_to_remote。 - dimir

link_to_function自Rails 1.0以来就存在，但你说得对它并没有被移除；它已经被弃用（然后取消弃用，然后又反复几次）。我会更新我的回答。谢谢！ - Ron DeVera

如果我有一份股票清单，并想要做类似的事情。我将如何将股票符号传递到点击函数中？ - Xavier John

当使用$('#my-link').click()解决方案时，如何将参数传递给JavaScript函数？例如记录的当前ID。是否有Rails的方法来实现这一点？或者唯一的解决方案是在link_to中添加"record-id" => "<%= @record.id %>"？ - Jesse

Answer 2

如果使用jQuery并将其放入application.js或head部分，则需要将其包装在一个ready()部分中，作为Ron答案的跟进...

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

- Jim Morris

---

请注意，这可以缩短为 $(function() { ... });，与 $(document).ready(function() { ... }); 等效。 - Confusion

顺便提一下，jquery 3.0 建议使用 $(function() { // Handler for .ready() called. }); 而不是 **$(document).ready()**。 - alexventuraio

对于Rails 5与Turbolinks的使用，请使用以下代码：$(document).on('turbolinks:load', function () { - Brad

Answer 3

只需使用

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

- Lei Wang

Answer 4

另一种解决方案是捕获 onClick 事件，并将聚合数据传递给 JavaScript 函数。

.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