jquery cliquez sur Gestionnaire

Question

créer un groupe de balises dynamiquement, en les ajoutant à un je puis ajouter un gestionnaire de clic ...

$(document).ready(function(){ 
    // ... code to append <a> tags to nav div   
    $("#nav a").click(function(event){ 
     alert('Clicked '+event.target.id); 
     return false; 
    }); 
}); 

Si j'ai 10 balises à la suite de cela et cliquez sur le premier , Je reçois 10 alertes (DIX!) - mais elles affichent toutes l'identifiant de l'étiquette sur laquelle j'ai cliqué.

(Si je clique sur le 5ème étiquette, eh oui, je reçois 5 alertes - le tout avec l'id du 5ème étiquette ...)

Qu'est-ce qui se passe ici? Est-ce parce que j'ai créé les tags dynamiquement? Existe-t-il un moyen de l'éviter?

Merci

Answer 1

Essayez ceci:

$(document).ready(function(){ 
    /* ... code to append <a> tags to nav div. */  
    $("#nav a").each(function(){ 
      $(this).click(function(e){ 
       alert('Clicked ' + e.target.id); 
       return false; 
      }); 
    }); 
}); 

Quoi qu'il en soit, ces deux sont les mêmes! Il n'y a pas de problème avec votre code. Vérifiez le code générateur de bogues.

Answer 2

Essayez:

$(document).ready(function(){ 
    // ... code to append <a> tags to nav div   
    $("#nav a").click(function(event){ 
     alert('Clicked '+ this.id); // replaced with "this" 
     return false; 
    }); 
}); 

Et assurez-vous que votre code est valide, par exemple:

<nav id="nav"> 
<a id="1" href="#"></a> 
<a id="2" href="#"></a> 
// ... 
</nav> 

Answer 3

Hmmm ... Je pense que vous devriez vérifier si vos balises sont en cours fermé correctement. Utilisez firebug pour vérifier le code HTML généré. Vous auriez peut-être obtenir ce si votre html ressemblait

<a>one<a>two<a>three</a></a></a> 

Answer 4

d'abord utiliser firebug pour voir si les ID sont effectivement placés correctement, je vais changer votre code thos cela et voir si cela fonctionne.

$(document).ready(function(){ 
    // ... code to append <a> tags to nav div   
    $("#nav a").click(function(event){ 
     alert('Clicked '+ $(this).attr('id')); 
     return false; 
    }); 
}); 

Answer 5

Votre code est correct, au moins cela a fonctionné pour moi ici dans mon test.

Le problème peut être un étrangeté IE6 ou simplement un problème CSS avec position: absolute; Bloc de visualisation;

Il ne me semble pas un problème de javascript.

Answer 6

Tout comme d'autres l'ont remarqué, je pense qu'il y a quelque chose qui ne va pas avec le code que vous utilisez pour générer dynamiquement les ancres.

Néanmoins, voici un exemple qui devrait atteindre le résultat que vous visez:

$(document).ready(function(){ 

    var eNav = document.getElementById('nav'); 

    var aLink = null; 
    for(var i = 0; i < 5; i++) { 
    aLink = document.createElement('a'); 
    aLink.href = 'javascript:;'; 
    aLink.id = i; 
    aLink.appendChild(document.createTextNode('Link')); 
    eNav.appendChild(aLink); 
    } 

    $("#nav a").click(function(event){ 
    alert('Clicked '+ event.target.id); 
    return false; 
    }); 

}); 

Answer 7

Il me semble que votre lie la fonction gestionnaire d'événements x nombre de fois à chaque élément où x est l'index de cet élément (+ 1) dans les propriétés array/object sur lesquelles vous itérez pour effectuer la liaison. Comment ajouter les éléments <a> au DOM? Pouvez-vous montrer le code complet complet?