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()'

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

2 个答案: