Link_to 方法并在 Rails 中单击事件

如何创建这种类型的链接:

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

在 Rails 中使用方法 link_to？

我从 Rails 文档上看不出来。

136504 次浏览
小开
最佳答案

您可以使用 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中使用的是 原型 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 错误(例如，开发人员错误)。

小开

如果使用 JQuery 并将其放入 application.js 或 head 部分，要继续跟踪 Ron 的答案，您需要将其包装在 ready ()部分中..。

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

好好利用

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

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

提交答案