Bonjour,
Je bute sur un problème avec jquery.

Je récupère la liste que j'affiche horizontalement dans des divs et je veux qu'en cliquant sur une des divs, je puisse récupérer les données qui y sont affichées. Mais je n'arrive pas à faire marcher l'événement "click" sur chaque div.

Voici mon code :

HTML (généré dans mon javascript) :

$(document).ready(function(){
    $.a
    jax({
        url: "ventes_en_cours.php",
        type: 'POST',
        data: {},
        dataType: 'html',
        success: function (data) {
            var html = '';
            $.each(JSON.parse(data), function (key, value) {
                html += '<div class="item">';
                html += '<a href="#">';
                html += '<div class="col-md-2 vitem" >';
                html += '<span class="vid" style="font-size: 18px;color: #8cc2f0;">' + value.vente_id + '</span><br />';
                html += '<span class="vtotal"  style=" font-size: 20px;color: #fff;">' + format_fr(value.TotalVente) + '</span><br />';
                html += '<span class="vdate"  style="font-size: 14px;color: yellow;">' + value.date_vente + '</span><br />';
                html += '</div>';
                html += '</a>';
                html += '</div>';
            });
            //alert(html);
            $('#listeventes').html(html);
        },
        error: function (data) {
            console.log(data);
        }

    });

Mon code Jquery sur click de la div :

$('div.col-md-2.vitem').click(function(){
    var vid = $(this).find(".vid").val();
    var vtotal = $(this).find(".vtotal").val();
    var vdate = $(this).find(".vdate").val();
    alert(vid + ' ' + vtotal + ' ' + vdate);
});

Quand je clique sur la div sélectionné, rien ne se passe.

Questions :

  • Suis-je sur le bon selector ?
  • Ce dysfonctionnement est-il dû au fait que mon code html soit généré dynamiquement dans le 'success' de mon appel ajax ?

1 réponse


Bonjour.

Ce dysfonctionnement est-il dû au fait que mon code html soit généré dynamiquement dans le 'success' de mon appel ajax ?

Il te faut plutôt utiliser la méthodé on de jQuery, exemple :

$('#listeventes').on('click', 'div.col-md-2.vitem', function() {
    // Ton code ...
});

Pour les explications, tu les auras en visionnant : Tutoriel Vidéo jQuery » jQuery.on().