jQuery - Event change sur liste déroulante dynamique ne se déclenche pas.

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
thirt05
Messages : 1
Enregistré le : 02 févr. 2019, 15:21

jQuery - Event change sur liste déroulante dynamique ne se déclenche pas.

Message par thirt05 » 02 févr. 2019, 15:23

Bonjour,
quand j'essaie de rentrer dans l'événement change() d'une liste déroulante dynamique, il n'exécute pas le code qui se trouve à l'intérieur.

Il n'intercepte pas l'event suivant : $('#country-'+$('#COUN_ID').val()).change(function(event){});

voici mon code javascript/jQuery :

Code : Tout sélectionner

(function($){
    var postcodes_table = {};
     
    $("#post_codes select").each(function(){
        // Pour éviter de réutiliser le selecteur tout le temps
        var select_postcode = $(this);
 
        postcodes_table[select_postcode.attr('id')] = select_postcode;
 
        select_postcode.remove();
    });
 
    $('#COUN_ID').change(function(event){
        var country_id = $(this).val();
 
        if (country_id == 0)
        {
            $("#post_codes").hide();
        }
        else
        {
            $("#post_codes").show();
 
            $("#post_codes").empty().append(postcodes_table['country-'+country_id]);
        }
    }).trigger('change');
 
    var cities_table = {};
 
    $("#cities select").each(function(){
        var select_city = $(this);
 
        cities_table[select_city.attr('id')] = select_city;
 
        select_city.remove();
    });
     
    $('#country-'+$('#COUN_ID').val()).change(function(event){
        var postal_code_id = $(this).val();
 
        if (postal_code_id == 0)
        {
            $("#cities").hide();
        }
        else
        {
            $("#cities").show();
 
            $("#cities").empty().append(cities_table['postcode-'+postal_code_id]);
        }
    }).trigger('change');
})(jQuery);
Voici le code HTML :

Code : Tout sélectionner

<!-- Registration Form -->
<div class="row">
    <div class="col-lg-4 offset-lg-4 bg-light rounded register-class" id="register-box">
        <h2 class="text-center mt-2">Register</h2>
        <form action="" method="post" role="form" class="p-2" id="register-form">
            <div class="form-group countries" id="countries">
                <select name="COUN_ID" id="COUN_ID" class="form-control">
                    <option value="0">Sélectionnez un pays ...</option>
                    <?php foreach ($countries as $country): ?>
                        <option value="<?= $country->COUN_ID; ?>"<?= $country_id == $country->COUN_ID ? ' selected' : ''; ?>><?= $country->COUN_TITLE; ?></option>
                    <?php endforeach ?>
                </select>
            </div>
            <div class="form-group postcodes" id="post_codes">
                <?php foreach ($postcodesByCountry as $countryId => $postalCodes): ?>
                    <select name="POST_ID" id="country-<?= $countryId; ?>" class="form-control">
                        <option value="0">Sélectionnez un code postal ...</option>
                        <?php foreach ($postalCodes as $postalCodeId => $postalCodeName): ?>
                            <option value="<?= $postalCodeId; ?>"<?= $postcode_id == $postalCodeId ? ' selected' : ''; ?>><?= $postalCodeName; ?></option>
                        <?php endforeach ?>
                    </select>
                <?php endforeach ?>
            </div>
            <div class="form-group cities" id="cities">
                <?php foreach ($citiesByCountry as $postCodeId => $towns): ?>
                    <select name="CITY_ID" id="postcode-<?= $postCodeId; ?>" class="form-control">
                        <option value="0">Sélectionnez une ville ...</option>
                        <?php foreach ($towns as $townId => $townName): ?>
                            <option value="<?= $townId; ?>"<?= $city_id == $townId ? ' selected' : ''; ?>><?= $townName; ?></option>
                        <?php endforeach ?>
                    </select>
                <?php endforeach ?>
            </div>
            <div class="form-group">
                <input type="submit" name="register-btn" id="register-btn" value="Inscription" class="btn btn-primary btn-block">
            </div>
        </form>
    </div>
</div>
Avez-vous une idée à propos du fait que l'événement change() ne se déclenche pas ?

Est-ce possible de déclencher un event sur un sélecteur dont le nom est dynamique (ex : country-1, country-2, ...) ?

Merci d'avance

Bonne journée
Thierry

Répondre