変更イベントの作成方法イベントがクラスに呼び出されるのは1回だけ実行されます

Question

マルチダイナミックセレクトメニューを設計しています。つまり、ブランド用のメニューがあります。ユーザーがブランドを選択した後、JavaScriptとAjaxを使用して、そのブランドから利用可能なモデルを検索し、2番目の選択メニューに追加します。このプロセスは再び繰り返されますが、今回は選択されたモデルの機能を示します。

これを行うには、同じシステムが必要なさまざまな領域があるため、すべてのブランド選択メニューで同じ名前を持つクラスを使用し、すべてのモデル選択メニューに別のメニューを使用します。

  <div class='brand_select' id='14'>
    <%= f.collection_select :brand, Product.find_all_by_area(14, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
  </div>
  <div class='model_select'>
     <%= f.collection_select :model, Product.find_all_by_area(14), :model, :model, :prompt => 'Choose model' %> 
  </div>

  <div class='brand_select' id='15'>
    <%= f.collection_select :brand, Product.find_all_by_area(15, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
  </div>
  <div class='model_select'>
     <%= f.collection_select :model, Product.find_all_by_area(15), :model, :model, :prompt => 'Choose model' %> 
  </div>

そしてJavacript：

$('.brand_select').change(function(event) {
    // option selected
    var brand=$(event.target).find('option:selected').val();

    // if none is selected
    if (brand == ''){
            $(event.target).parent().parent().find('.modelo_select').hide();
            $(event.target).parent().parent().find('.caracteristica').hide();
        }
    else {
        $(event.target).parent().parent().find('.modelo_select').show();
        // find id to search on the database
        var id=$(event.target).parent().attr('id');
        // find the target (id of the object)
        var target=$(event.target).attr('id');

        $.ajax({
            type: "POST",
            url: "http://"+location.host+"/model/"+brand+"/"+id+"/"+target,
            brand: brand,
            id: id,
            target: target
        });
    }  
});

$('.model_select').change(function(event) {
        // find model selected to search on the database
        var model=$(event.target).find('option:selected').val();
        // find brand selected to search on the database
        var brand=$(event.target).parent().parent().find('.marca_select').find('option:selected').val();
        // find id to search on the database
        var id=$(event.target).parent().parent().find('.marca_select').attr('id');
        // find the target (id of the object)
        var target=$(event.target).attr('id');

        $.ajax({
            type: "POST",
            url: "http://"+location.host+"/feature/"+brand+"/"+model+"/"+id+"/"+target,
            brand: brand,
            model: model,
            id: id,
            target: target
        });
});

このコードは機能しますが、イベントがその名前のクラスと同じ回数を繰り返します。

私がやりたいのは、クラスの変更イベントが呼び出されるたびに、この関数が1回だけ実行されることです。

これが私が持っているクラス構造で可能かどうか、または各領域の異なる名前にIDまたはクラスを関数に関連付ける必要があるかどうかはわかりません。

Answer 1

あなたの助けのために、私は問題がJavaScriptとは何の関係もないが、代わりにRuby on Railsにあることを知りました。

私は追加していました application.html.erb 他のJSファイルとあなたが持っている場合 //= require_tree に application.js ツリー内のすべてのJSファイルを追加するため、JSファイルを追加します application.html.erb それらを繰り返し、このような奇妙な行動を引き起こします。

Answer 2

あなたが$（selector）でやっているすべてのことは、あなたがそれを処理したいセレクターで変更イベントが発射するたびに発射すると言っているので、私はイベントが2回発射すべき理由がわかりません。確かに簡単なテストを実行しましたが、それは複数回発火しません。

症状が実際に何であるかをもう少し説明できますか？のように、実際に何が起こるのですか？イベントハンドラーのすべてが2回発生しますか？

私はあなたが両親に実行するアクションのためのあなたのセレクターは少しゆるい（$（event.target）.parent（）。parent（））であると思っていたので、あなたがイベントでコンテナで何かをしたい場合は、最良の方法ではないでしょう（しかし、再びあなたの最終目的がここにあるのかわかりません）。