如何在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来为特定的表单元素添加函数。有人能告诉我我做错了什么吗？

- Dylan

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中，您可以使用事件委托来监视整个文档上设置了data-question的任何元素上的change事件：

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

---

注意：你可以不使用 data-question，而是给元素添加一个类，然后修改 jQuery 以使用该类。

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

通常我会尽量减少在JavaScript中使用CSS选择器，这样设计师就可以自由地更改它们而不会破坏任何东西，但这同样有效。

- Michelle Tilley

---

为什么要使用 ..., data: { question: true } 而不是例如 ..., 'data-question' => true？ - 244an

在这种情况下，它们是相同的。但是对于像哈希一样的情况：data: { question_id: 10, other_thing: 'asdf' }，Rails 将会生成 data-question-id="10" data-other-thing="asdf"，非常不错。 - Michelle Tilley

Answer 2

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

- Murali N