Cómo hacer un evento de cambio solo se ejecuta una vez que se llama el evento para una clase

Question

Estoy diseñando un menús seleccionados de múltiples dinámicos, es decir, tengo un menú para marcas, después de que el usuario seleccione la marca, usando JavaScript y Ajax, buscaré los modelos disponibles de esa marca y los agregaré al segundo menú de selección. Este proceso se repite nuevamente, pero esta vez muestra las características del modelo seleccionadas.

Para hacer esto, y debido a que tengo muchas áreas diferentes que necesitan el mismo sistema, uso una clase con el mismo nombre en cada menú de selección de marca y otra en cada menú de selección de modelos.

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

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

Este código funciona, pero repite el evento cambia el mismo número de veces que las clases con ese nombre.

Lo que quiero hacer es que la función se ejecute solo una vez cada vez que se requiere un evento de cambio para la clase.

No sé si esto es posible con la estructura de clase que tengo o si tengo que asociar una identificación o una clase con diferentes nombres para cada área a la función.

Answer 1

Eso para su ayuda, descubrí que el problema no tiene nada que ver con JavaScript, sino que está en Ruby on Rails.

Estaba agregando application.html.erb otros archivos JS y si tiene el //= require_tree sobre el application.js Agrega todos los archivos JS en el árbol, por lo que agregar archivos JS en application.html.erb los hará repetir y causar comportamientos extraños como este.

Answer 2

No veo por qué el evento debería disparar dos veces porque todo lo que está haciendo con $ (selector). Cambiar es decir que cada vez que un cambio de cambio dispara en algo con ese selector, desea manejarlo. Incluso ejecuté una prueba rápida para estar seguro y no dispara más de una vez.

¿Puedes explicar un poco mejor cuál es el síntoma? Como en, ¿qué sucede realmente dos veces? ¿Todo en el controlador de su evento sucede dos veces?

Estaba pensando que sus selectores para las acciones que realiza en los padres podrían ser demasiado laxos ($ (Event.Target) .Parent (). Parent ()) Entonces, si solo desea hacer algo en el contenedor donde su evento fue despedido esa no sería la mejor manera (pero de nuevo no sé cuál es su propósito final aquí).