IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ajout d'un évènement click


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2007
    Messages : 12
    Par défaut Ajout d'un évènement click
    Soit
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
            <div class="ligne" id="btnsup">
             <button class="ob_repos" id="btn_vito">VITO</button><button class="ob_repos" id="btn_8p">8P</button>
            </div>
    Ce bout de code Html est créé dynamiquement via

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    container='btnsup';
    name_object='btn_vito';
    document.getElementById(container).innerHTML+='<button id="'+name_object+'" ></button>';
     
    current=document.getElementById(name_object);	
    current.onclick= function() { alert(this.id); ob_main(this.id);};
     
     
    name_object='btn_8p';
    document.getElementById(container).innerHTML+='<button id="'+name_object+'" ></button>';
     
    current=document.getElementById(name_object);	
    current.onclick= function() { alert(this.id);};
    Problème:
    seul le bouton n° deux réagit au clic.

    Or le but est de pouvoir créer dans un div particulier ( ici 'btnsup' ), une série de bouton de manière dynamique en fonction des besoins.
    Chaque bouton doit pouvoir réagir au clic et appelez la fonction adéquate.

    En créant un <div>supplémentaire dans lequel je mets le bouton, alors, cela fonctionne, mais je trouve cela étrange.

    Où fais-je la grosse bêtise ou qu'est-ce que je n'ai pas compris ?

    Merci d'avance pour toutes les pistes que vous pourriez proposer.

    ------
    NB
    j'ai essayé aussi avec addeventlistener
    J'ai essayé avec IE et Firefox
    Dans tous les cas, le phénomène est le même, seul un bouton est actif.
    Cela fais bien 3 jours que je bloque la dessus
    -------

  2. #2
    Rédacteur/Modérateur

    Avatar de yahiko
    Homme Profil pro
    Développeur
    Inscrit en
    Juillet 2013
    Messages
    1 424
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Juillet 2013
    Messages : 1 424
    Billets dans le blog
    43
    Par défaut
    Bonjour,

    Il me semble que tu essaies de définir tes gestionnaires de clics avant que la page HTML ne soit complètement générée.

    Pour éviter des bugs de ce type, il est préférable d'exécuter le code qui rattache tes fonctions à tes boutons lors de l'événement onload que tu peut définir dans la balise <body>.

    Ce qui pourrait donner en premier brouillon, un truc dans le genre :
    Code Fichier HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <body onload="handleClicks();">
      <div class="ligne" id="btnsup"></div>
     
    ...
     
    </body>

    Code Fichier Javascript à inclure en fin de <body> : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    function handleClicks() {
        var name_object = 'btn_vito';
        var current = document.getElementById(name_object);
        current.onclick = function () {
            alert(this.id);
        };
     
        var name_object = 'btn_8p';
        var current = document.getElementById(name_object);
        current.onclick = function () {
            alert(this.id);
        };
    }
     
    var container = 'btnsup';
     
    var name_object = 'btn_vito';
    document.getElementById(container).innerHTML += '<button id="' + name_object + '"></button>';
     
    var name_object = 'btn_8p';
    document.getElementById(container).innerHTML += '<button id="' + name_object + '"></button>';
    ==> http://jsfiddle.net/Yahiko/CVtHY/
    Tutoriels et FAQ TypeScript

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2007
    Messages : 12
    Par défaut le document est deja charge
    lorsque je rajoute les boutons, le document est deja chargé, disons que pour faire simple, les boutons sont créés suite a un evenements , par exemple le clic sur un bouton.

    mon probleme est que le clic fonctionne sur un seul des boutons, pas les deux.
    sauf si je mets les boutons dans un div parent.

    le code est un extrait resumé. mais le document est deja entierement chargé lorsqu'il s'execute.

    si je cree le bouton avec l'action onclick directement via innerHTML, cela marche,
    si j'essaye d'ajouter l'evenement onclick apres en js, cela ne marche que sur le dernier bouton.


    je vais faire une page test pour montrer le probleme.
    en attendant, toutes info concernant l'ajout d'evenements a un objet est bienvenu

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2007
    Messages : 12
    Par défaut Je ne demande qu'à comprendre
    Merci à sekaijin pour cette très intéressante information.

    Il est donc mieux de créer le bouton directement avec du javascript ?

    Sinon,
    'tu fais donc ceci
    - mise dans la file d'attente du moteur html d'un code HTML
    - récupération de l'objet
    - passage de la main au moteur HTML pour effectuer le rendu (création de l'objet)'


    Un petit exemple en javascript ?
    comment je peux faire ce passage au moteur HTML ?

    "Je pense qu'il y a là un truc simple à comprendre., "et bien non, c'est très nébuleux


    http://jsfiddle.net/CVtHY/1/
    j'ai modifier le code de yahiko que je remercie au passage pour le lien vers jsfiddle.net .

    Le code, évidemment ne fonctionne plus comme il faut.
    j'ai un bouton fonctionnel et un qui ne l'est pas

  5. #5
    Rédacteur/Modérateur

    Avatar de yahiko
    Homme Profil pro
    Développeur
    Inscrit en
    Juillet 2013
    Messages
    1 424
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Juillet 2013
    Messages : 1 424
    Billets dans le blog
    43
    Par défaut
    As-tu au moins essayé le code tel que je te l'ai proposé ?

    Il me semble qu'ainsi cela fonctionne.
    Tutoriels et FAQ TypeScript

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2007
    Messages : 12
    Par défaut Oui, cette version fonctionne mais ...
    Oui, cette version fonctionne mais les boutons doivent pouvoir être créé au fur et à mesure.

    Ce qui est étrange, c'est que mon code ne fonctionne pas, alors que ce sont les mêmes appels mais dans un ordre différent.

    Il me semble que sekaijin donne une explication intéressante mais je ne vois pas encore comment l'exploiter.

  7. #7
    Rédacteur/Modérateur

    Avatar de yahiko
    Homme Profil pro
    Développeur
    Inscrit en
    Juillet 2013
    Messages
    1 424
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Juillet 2013
    Messages : 1 424
    Billets dans le blog
    43
    Par défaut
    Tout d'abord, je ne vois pas pourquoi tu ne pourrais pas gérer de nouveaux boutons avec le code posté dans le premier article.
    Si tu rajoute du code dans le scope global, pourquoi ne pas en rajouter dans le scope de la fonction que j'ai nommé handleClicks() ?

    Bref, je pense qu'il y a une chose ou deux qui m'échappe dans ton problème...

    Si tu tiens vraiment à faire du code séquentiel, tu peux utiliser jQuery et la fonction ready() qui permet d'exécuter du code lorsque le document est complètement (re)-généré.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    var name_object = 'btn_vito';
    document.getElementById(container).innerHTML += '<button id="' + name_object + '"></button>';
     
    $(document).ready(function () {
        var current = document.getElementById(name_object);
        current.onclick = function () {
            alert(this.id);
        };
    });
     
    var name_object = 'btn_8p';
    document.getElementById(container).innerHTML += '<button id="' + name_object + '"></button>';
     
    $(document).ready(function () {
        var current = document.getElementById(name_object);
        current.onclick = function () {
            alert(this.id);
        };
    });
    Tutoriels et FAQ TypeScript

  8. #8
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    Citation Envoyé par exsit Voir le message
    Un petit exemple en javascript ?
    comment je peux faire ce passage au moteur HTML ?
    Citation Envoyé par sekaijin Voir le message
    utiliser innerHTML implique de déléguer la création des objets au moteur d'interprétation HTML.
    Tout simplement en créant l'objet plutôt que de demander au moteur HTML de le faire pour toi. Javascript à une API DOM c'est fait pour ça
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    container='btnsup';
    name_object='btn_vito';
    var nouveauBouton = document.createElement('button');
    nouveauBouton.onclick = function() { alert(this.id); ob_main(this.id);};
    nouveauBouton.setAttribute('id', name_object);
    document.getElementById(container).appendChild(nouveauBouton);
    l'API DOM et souvent décriée, mise de côté, ignorée. Mais elle est simple, rapide, efficace. et Ok je l'admets verbeuse.

    A+JYT

  9. #9
    Rédacteur/Modérateur

    Avatar de yahiko
    Homme Profil pro
    Développeur
    Inscrit en
    Juillet 2013
    Messages
    1 424
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Juillet 2013
    Messages : 1 424
    Billets dans le blog
    43
    Par défaut
    Tout à fait. C'est aussi une possibilité que j'aurais du voir...
    Je manque encore d'expérience j'imagine.

    Néanmoins, même si l'exemple ci-dessus ne rentre pas dans ce cas, dans les petits soucis de l'API DOM est qu'elle n'est pas toujours bien supportée par tous les navigateurs il me semble, notamment ceux qui sont un peu vieux.

    Mais oui, je suis d'accord, quand on peut s'en servir, il n'y a pas à se gêner même si les automatismes de jQuery prennent parfois le dessus.
    Tutoriels et FAQ TypeScript

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2007
    Messages : 12
    Par défaut Merci beaucoup
    Problème résolu.

    La méthode de sekaijin fonctionne , les deux boutons fonctionne bien maintenant.

    Pour répondre à yahiko, je me suis mis comme principe de ne pas utiliser de librairie externe si je peux le faire moi-même, de plus, à première vue, jquery construit une image du DOM au chargement de la page et la gestion des évènements créé dynamiquement me semble devoir se faire que via des effets de bubbling en interrogeant l'objet parent déjà existant. Je trouve cela lourd.

    dans l'exemple que j'ai mis à jour ici : http://jsfiddle.net/CVtHY/1/ , je montre comment je travaille, je reçois une commande de créer un bouton, donc je le crée et j'y ajoute immédiatement l'évènement onclic, pour moi ce code me semble bon et pourtant il ne marche pas. L'explication de Sekaijin semble correcte et sa méthode me permets de faire ce que je veux.

    De toutes façons, je vous remercie tous les deux car votre aide m'a été précieuse.

    Au cas où vous passez à Bruxelles, il y a toujours une bière dans le frigo

  11. #11
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    container='btnsup';
    name_object='btn_vito';
    document.getElementById(container).innerHTML+='<button id="'+name_object+'" ></button>';
     
    current=document.getElementById(name_object);	
    current.onclick= function() { alert(this.id); ob_main(this.id);};
    ...
    comme toujours il s'agit d'une totale incompréhension de cycle d'exécution de javascript.
    utiliser innerHTML implique de déléguer la création des objets au moteur d'interprétation HTML. celui-ci s'éxécutera lorsque le script courant aura rendu la main c'est à dire apres le getElementById suivant.

    tu fais donc ceci
    - mise dans la file d'attente du moteur html d'un code HTML
    - récupération de l'objet
    - passage de la main au moteur HTML pour effectuer le rendu (création de l'objet)

    Je pense qu'il y a là un truc simple à comprendre.

    A+JYT

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 26/02/2007, 15h33
  2. gérer l'évènement Click du contrôle Image
    Par naruto01 dans le forum VB 6 et antérieur
    Réponses: 7
    Dernier message: 30/01/2007, 18h43
  3. Problème d'évènement click sur mon onglets
    Par bitou11 dans le forum Access
    Réponses: 7
    Dernier message: 02/08/2006, 23h24
  4. [JS] Ajout dynamique d'événement-propriété à un td
    Par Demco dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 07/06/2006, 15h07
  5. événement Click sur Check et option button ??
    Par badsepuku dans le forum IHM
    Réponses: 3
    Dernier message: 09/02/2006, 12h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo