Question

如何创建此类型的链接：

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

在Rails中使用方法link_to

我无法从Rails docs中找到答案。

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'

假设您在application.js中使用Prototype JS framework，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错误（即开发人员错误）。

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
  });
});

Answer 3

只需使用

{{1}}

Answer 4

另一种解决方案是捕获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');
});

link_to方法和Rails中的单击事件

4 个答案: