Como fazer um evento de mudança apenas uma vez que o evento é chamado para uma aula

Question

Estou projetando menus de seleção multi dinâmica, ou seja, tenho um menu para marcas, depois que o usuário selecionar a marca, usando o JavaScript e o Ajax, procurarei os modelos disponíveis dessa marca e os adicionará ao segundo menu de seleção. Esse processo se repete novamente, mas desta vez mostra os recursos do modelo selecionado.

Para fazer isso e, como tenho muitas áreas diferentes que precisam do mesmo sistema, uso uma classe com o mesmo nome em todos os menus de seleção da marca e outro para cada menu de seleção de modelo.

  <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>

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

Esse código funciona, mas repete o evento Alterar o mesmo número de vezes que as classes com esse nome.

O que eu quero fazer é que a função seja executada apenas uma vez que um evento de mudança é chamado para a classe.

Não sei se isso é possível com a estrutura de classe que tenho ou se tenho que associar um ID ou uma classe a nomes diferentes para cada área à função.

Answer 1

Para sua ajuda, descobri que o problema não tem nada a ver com JavaScript, mas está no rubi nos trilhos.

Eu estava adicionando application.html.erb outros arquivos JS e se você tiver o //= require_tree no application.js Ele adiciona todos os arquivos JS na árvore, então adicionando arquivos JS em application.html.erb fará com que eles se repetirão e causarão comportamentos estranhos como este.

Answer 2

Não vejo por que o evento deve disparar duas vezes, porque tudo o que você está fazendo com $ (seletor) .Change está dizendo que toda vez que um evento de mudança dispara sobre algo com esse seletor que você deseja lidar com isso. Eu até fiz um teste rápido para ter certeza e ele não dispara mais de uma vez.

Você pode explicar um pouco melhor qual é o sintoma? Como, o que realmente acontece duas vezes? Tudo no seu manipulador de eventos acontece duas vezes?

Eu estava pensando que seus seletores para as ações que você executa nos pais podem ser um pouco relaxadas ($ (event.target) .parent (). Parent ()), portanto, se você quiser fazer algo no contêiner onde seu evento Foi demitido que não seria a melhor maneira (mas, novamente, não sei qual é o seu objetivo final aqui).