如何在Ruby on Rails中为表单元素添加onchange侦听器？

Question

我正在Ruby on Rails中编写表单，并希望有一个调用Javascript函数的选择框。在表单文件中，这是我用来尝试添加选择框的行：

<%= f.select :question_select, Question.all, :prompt => "New Question", :onchange => "displayQuestion(this)" %>

在我的application.js文件中，我只有：

function displayQuestion(link) {
    alert("Changed question");
}

我将在页面中动态添加这些表单元素，因此我不能仅在application.js文件中使用jQuery向特定表单元素添加函数。谁能告诉我我做错了吗？

Answer 1

您可能知道，Rails 3强烈鼓励使用UJS（不引人注目的JavaScript），这基本上意味着JavaScript可以完成繁重的工作，并且您不应该将客户端交互与表单生成器绑定在一起。我建议在这里做一些非常相似的事情-仅因为您动态添加元素并不意味着您不能使用jQuery来监视它们的更改。

在您的模板中：

<%= f.select :question_select, Question.all, {prompt: "New Question"}, data: { question: true } %>

这将创建如下内容：

<select id="..." data-question="true">
  ...
</select>

然后，在JavaScript中，您可以使用事件委托来监视在整个文档中设置了change的任何元素上的data-question事件：

$(function() {
  $(document).on('change', '[data-question]', function() {
    // this == the element that fired the change event
    alert('Changed question');
  });
});

---

注意：您可以简单地向元素添加一个类，然后修改jQuery以使用该类，而不是使用data-question：>

$(function() {
  $(document).on('change', '.question', function() {
    // this == the element that fired the change event
    alert('Changed question');
  });
});
[通常，我会尽量减少JavaScript中CSS选择器的使用，以便设计人员可以自由地将其更改为所需的内容，而不会造成任何麻烦，但是它同样起作用。

Answer 2

select_tag :variable, options_from_collection_for_select(:all, :id, :name), :onchange => 'your_onchange_handler()'