Comment faire un événement de changement ne fonctionne qu'une seule fois que l'événement est appelé pour un cours

Question

Je conçois des menus sélectionnés multi-dynamiques, c'est-à-dire que j'ai un menu pour les marques, après que l'utilisateur a sélectionné la marque, en utilisant JavaScript et Ajax, je rechercherai les modèles disponibles à partir de cette marque et les ajouterai au deuxième menu sélectionné. Ce processus se répète à nouveau mais cette fois montrant les fonctionnalités du modèle sélectionné.

Pour ce faire, et parce que j'ai de nombreux domaines différents qui ont besoin du même système, j'utilise une classe avec le même nom dans chaque menu de sélection de marque et un autre à chaque menu de sélection de modèles.

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

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

Ce code fonctionne mais il répète l'événement change le même nombre de fois que les classes avec ce nom.

Ce que je veux faire, c'est que la fonction exécute une seule fois chaque fois qu'un événement de changement est appelé pour la classe.

Je ne sais pas si cela est possible avec la structure de classe que j'ai ou si je dois associer un ID ou une classe avec différents noms pour chaque zone à la fonction.

Answer 1

Que pour votre aide, j'ai découvert que le problème n'a rien à voir avec JavaScript mais est plutôt sur le rubis sur les rails.

J'ajoutais application.html.erb Autres fichiers JS et si vous avez le //= require_tree sur le application.js Il ajoute chaque fichier JS dans l'arborescence, donc l'ajout de fichiers JS sur application.html.erb les fera répéter et provoquer des comportements étranges comme celui-ci.

Answer 2

Je ne vois pas pourquoi l'événement devrait se déclencher deux fois parce que tout ce que vous faites avec $ (Selector). Change dit que chaque fois qu'un événement de changement tire sur quelque chose avec ce sélecteur, vous voulez le gérer. J'ai même passé un test rapide pour être sûr et il ne tire pas plus d'une fois.

Pouvez-vous expliquer un peu mieux quel est le symptôme réellement? Comme dans, que se passe-t-il deux fois? Est-ce que tout dans votre gestionnaire d'événements se produit deux fois?

Je pensais que vos sélecteurs pour les actions que vous effectuez sur les parents pourraient être un peu trop laxistes ($ (event.target) .parent (). Parent ()) donc si vous voulez seulement faire quelque chose sur le conteneur où votre événement a été licencié qui ne serait pas le meilleur moyen (mais là encore, je ne sais pas quel est votre objectif final ici).