ruby-on-rails - 如何在 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 中，您可以使用事件委托(delegate)来监视 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 选择器，以便设计人员可以自由地将它们更改为他们想要的任何东西而不会破坏任何东西，但它也同样有效。