如何进行更改事件仅运行一次，该活动被要求进行课程

Question

我正在设计一个多动态的精选菜单，即，我有一个用于品牌的菜单，在用户选择品牌，使用JavaScript和Ajax之后，我将搜索该品牌可用的型号，并将它们添加到第二选择菜单中。此过程再次重复，但是这次显示了所选模型的功能。

为此，由于我有许多需要相同系统的不同领域，因此我在每个品牌选择菜单中使用具有相同名称的类，而每个型号选择菜单则使用另一个名称。

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

该代码有效，但它重复事件更改与该名称的类相同的次数。

我要做的是使该功能每次都只能为课程调用一个更改事件一次。

我不知道这是否可以使用我的类结构，或者我必须将每个区域的不同名称的ID或类与该功能相关联。

Answer 1

为了您的帮助，我发现问题与JavaScript无关，而是在Ruby上。

我正在添加 application.html.erb 其他JS文件，如果您有 //= require_tree 在 application.js 它添加了树中的每个JS文件，因此在上添加JS文件 application.html.erb 将使他们重复并引起这样的奇怪行为。

Answer 2

我不明白为什么该事件应该两次开火，因为您要使用$（选择器）。改变说，每次更改事件都会与您要处理的选择器一起发射。我什至进行了快速测试以确保它不会发射不止一次。

您能更好地解释什么症状是什么？就像在一样，实际发生了两次？您活动中的所有处理程序是否发生了两次？

我以为您对父母所做的动作的选择可能太松懈（$（event.target）.parent（）。父母（）。被解雇了这不是最好的方法（但是我又一次不知道您的最终目的是什么）。