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

私は通常、JavaScript での CSS セレクターの使用を最小限に抑えようとしています。これにより、デザイナーは問題を壊すことなく好きなものに自由に変更できるようになりますが、それでもうまく機能します。

于 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 に答える