5

我正在用 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 将函数添加到特定的表单元素。谁能告诉我我做错了什么？

4

2 回答 2

2

您可能知道，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');
  });
});

I generally try to minimize the use of CSS selectors in my JavaScript so that designers are free to change them to whatever they want without breaking things, but it works just as well.

于 2012-11-28T08:40:05.777 回答
1 
select_tag :variable, options_from_collection_for_select(:all, :id, :name), :onchange => 'your_onchange_handler()'
于 2012-11-28T08:37:19.050 回答