如何在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');
  });
});

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

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

我通常会尽量减少在 JavaScript 中使用 CSS 选择器，以便设计者可以自由地将它们更改为他们想要的任何内容，而不会破坏东西，但它的效果也很好。