Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JQuery] event .click sur un élément créé

Sujet résolu
    11 janvier 2019 à 19:22:24

    Bonjour,

    Grâce à cette fonction, je crée un élément que je viens rajouter à la suite d'autres par la commande 

    function CreateLiFile(name, path) {
    
        var html = '<li class="d-inline-block mx-3">\n' ;
        html += '<a class="documents file text-center" href="' + '../' + path + name + '">\n' ;
        html += '<h1 class="my-0">\n' ;
        html += '<i class="fa fa-file"></i>\n' ;
        html += '</h1>\n' ;
        html += '<h6 class="my-0">' + name + '</h6>\n' ;
        html += '</a>\n' ;
        html += '</li>' ;
    
        return html ;
    }

     Et la commande :

    document.getElementById('listing').innerHTML += CreateLiFile("test") ;

    J'ai plusieurs scripts JQuery qui viennent écouter des événements comme le clique :

    // Si on clique sur le bouton de création de dossier
    $("label#new").on( "click", function() {
        $("input#new-input").toggleClass('input-unvisible') ;
    }) ;

    J'ai un problème qui me turlupine depuis plusieurs heures. En effet, l'écoute d'un clique du script précédent fonctionne sur les éléments enfants de ma div #listing. Dès que j'utilise la fonction CreateLiFile pour en rajouter un dans la div #listing, le script JQuery précédent d'écoute ne fonctionne plus.

    Je suis assez embêté...

    Sauriez-vous d'où cela peut-il venir ?

    Bien cordialement

    • Partager sur Facebook
    • Partager sur Twitter
      12 janvier 2019 à 22:58:49

      Bonjour,

      Ton problème est lié à des méthodes d'optimisations. Il serait bien trop coûteux à la machine de surveiller tous les éléments d'un certain type. Le Javascript place donc des écouteurs sur les éléments du DOM qui existent. Les nouveaux ne sont pas automatiquement indexés.

      Il existe toutefois une solution avec jQuery :

      $(document).on('click', 'input', function () { ... });

      Ce code permet de détecter le clique sur tous les input qui existent ou existeront (bien entendu c'est un sélecteur, déclinable à toutes les sauces).

      -
      Edité par yarflam 12 janvier 2019 à 23:00:38

      • Partager sur Facebook
      • Partager sur Twitter
        13 janvier 2019 à 13:59:46

        Bonjour yarflam,

        Vous êtes un dieu :D

        Ça a parfaitement résolu mon problème

        Merci beaucoup

        • Partager sur Facebook
        • Partager sur Twitter

        [JQuery] event .click sur un élément créé

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown