Discussion :

[yoshï]

Bonjour,
je viens de découvrir cette superbe librairie (jQuery) qui facilite grandement la vie ^^. Je me pose tout de même quelques questions.
L'accès aux éléments d'une page se fait grâce à la fonction ready() qui permet d'attendre le chargement des éléments.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(document).ready(function() {
        $("#alias").click(function(){
             alert("Hello world");
         });

Ce code fonctionne très bien il va afficher le message "Hello world" quand on clique sur un élément alias. Maintenant j'aimerai générer dynamiquement un élément alias grâce au code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function() {
$("#add").bind("click", function ()  {
                $("#divtest").html($("#divtest").html() +"<br><span id='alias'>alias </span>" );
        });
 
 $("#alias").click(function(){
             alert("Hello world");
         });
});

quand on clique sur l'élément add, l'élément alias apparait mais impossible d'afficher "Hello world" en cliquant dessus. Je pense que ça vient du fait que l'élément alias a été créé après chargement de la page...Est ce que vous voyez une solution à ce pb?

Merci d'avance

[marcha]

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function() {
  $("#add").bind("click", function ()  {
    $("#divtest").html($("#divtest").html() +"<br><span id='alias'>alias </span>" );
    $("#alias").click(function(){
       alert("Hello world");
    });
  });
});

Il te faut assigner le click après que l'élément soit crée, pas avant.

Une remarque sur ton code, tu ajoute du code html à ta div divtest.
Si tu procède comme tu l'as fait, c'est à dire en recomposant une chaine html
contenant l'ancien code html de divtest auquel tu ajoute ton br et span, alors
tu vas détruire les éléments dom existants pour en recréer de nouveaux.

Tu perdras toute affectation d'évènements sur le code existant dans divtest

Il te faut regarder les méhtode append, prepend appendTo etc... pour faire
ça.

Une autre remarque, pour créer ton span cliquable tu peux écrire ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("<span></span>").html('alias').click( function() { alert("Hello world"); }).appendTo($('#divtest'));

JQuery propose un chainage des appels vraiment très pratique et concis.

[yoshï]

Merci beaucoup pour ta réponse claire ^^