Come eseguire un evento di modifica solo una volta l'evento viene chiamato per una classe

Question

Sto progettando un menu Select Multi Dynamic, cioè ho un menu per i marchi, dopo che l'utente ha selezionato il marchio, usando JavaScript e Ajax, cercherò i modelli disponibili da quel marchio e li aggiungerò al secondo menu selezionato. Questo processo si ripete di nuovo ma questa volta mostra le caratteristiche del modello selezionato.

Per fare questo, e poiché ho molte aree diverse che necessitano dello stesso sistema, utilizzo una classe con lo stesso nome in ogni menu Seleziona del marchio e un altro menu Seleziona uno a ogni modello.

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

Questo codice funziona ma ripete che l'evento cambia lo stesso numero di volte delle classi con quel nome.

Quello che voglio fare è che la funzione esegui solo una volta ogni volta che un evento di modifica viene chiamato per la classe.

Non so se ciò sia possibile con la struttura della classe che ho o se devo associare un ID o una classe a nomi diversi per ogni area alla funzione.

Answer 1

Che per il tuo aiuto, ho scoperto che il problema non ha nulla a che fare con JavaScript ma è invece su Ruby sui binari.

Stavo aggiungendo application.html.erb altri file JS e se hai il //= require_tree sul application.js Aggiunge ogni file JS nell'albero, quindi aggiungendo file JS application.html.erb Li farà ripetere e causerà strani comportamenti come questo.

Answer 2

Non vedo perché l'evento dovrebbe sparare due volte perché tutto quello che stai facendo con $ (selettore). Changge dice che ogni volta che un evento di modifica spara su qualcosa con quel selettore che vuoi gestirlo. Ho anche eseguito un rapido test per essere sicuro e non spara più di una volta.

Puoi spiegare un po 'meglio quale sia effettivamente il sintomo? Come in, cosa succede realmente due volte? Tutto nel tuo gestore di eventi accade due volte?

Stavo pensando che i tuoi selettori per le azioni che esegui sui genitori potessero essere un po 'troppo lax ($ (event.target) .Parent (). Parente ()) quindi se vuoi fare qualcosa solo sul contenitore in cui il tuo evento è stato licenziato che non sarebbe il modo migliore (ma poi non so quale sia il tuo scopo finale qui).