Как сделать событие изменений запустить только один раз, когда событие вызывает для занятий

Question

Я разрабатываю много динамическое выборочное меню, то есть у меня есть меню для брендов, после того, как пользователь выберите бренд, используя JavaScript и Ajax, я буду искать модели, доступные из этого бренда, и добавлю их во второе меню Select. Этот процесс повторяется снова, но на этот раз показывает функции выбранной модели.

Для этого, и поскольку у меня есть много разных областей, которые нуждаются в одной и той же системе, я использую класс с одинаковым именем в каждом меню «Выбор бренда», а другая - в каждом меню «Выбор модели».

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

Этот код работает, но он повторяет событие, изменяющееся такое же количество раз, как и классы с таким именем.

Что я хочу сделать, так это чтобы функция запускала только один раз каждый раз, когда на класс требуется событие изменения.

Я не знаю, возможно ли это со структурой класса, которая у меня есть, или мне нужно связать идентификатор или класс с разными именами для каждой области с функцией.

Answer 1

Это для вашей помощи я узнал, что проблема не имеет ничего общего с JavaScript, но вместо этого находится на рубине на рельсах.

Я добавил application.html.erb Другие файлы JS и если у вас есть //= require_tree на application.js он добавляет каждый файл JS в дерево, поэтому добавление файлов JS на application.html.erb заставит их повторять и вызвать странное поведение, подобное этому.

Answer 2

Я не понимаю, почему событие должно стрелять дважды, потому что все, что вы делаете с $ (селектор). Change говорит, что каждый раз, когда событие изменения стреляет на что -то с тем селектором, с которым вы хотите справиться. Я даже прошел быстрый тест, чтобы быть уверенным, и он не стреляет не раз.

Можете ли вы объяснить немного лучше, что на самом деле является симптомом? Как в том, что на самом деле происходит дважды? Все ли в вашем обработчике мероприятия происходит дважды?

Я думал, что ваши селекторы для действий, которые вы выполняете от родителей, могут быть слишком слабыми ($ (event.target) .parent (). Parent ()), поэтому, если вы хотите только что -то сделать в контейнере, где ваше мероприятие был уволен, который не был бы лучшим способом (но опять же, я не знаю, какова ваша конечная цель здесь).