[JQuery] insertion class avec append-prepend)-html

Bonjour,

Voilà j'ai un code comme ceci :

html :
<table id="table">
<tr>
    <td>
        <a class="delete" href="#">Ajouter</a>
    </td>
</tr>
</table>

JS :

$(".add").click(function() {
    $("#table").append("<tr><td><a class="delete" href="#"></a></td></tr>");
});

$(".delete").click(function() {
    alert("essai");
});

Mon probleme est que lorsque la page est chargé si je click sur le lien avec la classe delete, j'ai bien un messagebox alert("essai");
Mais si je fais un append avec jquery et que je click sur le lien crée je ne parviens pas à voir le messageBox.

Voilà comment résoudre ce petit problème ?
Merci

Et si tu fais un append d'un élément créé avec document.createElement?

$(".add").click(function() {
	var lien = document.createElement("a");
	lien.setAttribute("href", "#");
	lien.setAttribute("class", "delete");
	var cellule = document.createElement("td");
	cellule.append(lien);
	var ligne = document.createElement("tr");
	ligne.append(cellule);
	$("#table").append(ligne);
});

Bon, c'est un poil long (et comme je suis une bille en JS il y a peut-être une erreur...), mais ça vaut peut-être le coup de tester ainsi?

Ou alors c'est qu'il faut relancer la fonction qui ajoute un event listener sur les éléments portant la classe "delete".

À tester également:

function prepareDeleteLinks() {
	$("#table .delete").click(function() {
		alert("essai");
	});
}
prepareDeleteLinks();

$("#table .add").click(function() {
	$("#table").append("<tr><td><a class="delete" href="#">Test</a></td></tr>");
	prepareDeleteLinks();
});

(Merci aux gens compétents de corriger mes bêtises. )
Modifié par Florent V. (02 Jun 2008 - 17:20)

Peut-être que pour voir un résultat il faudrait déja mettre quelque chose dans tes balise a :

   $("#table").append("<tr><td><a class="delete" href="#">[b]Test[/b]</a></td></tr>");

Comme te la rajouté Florent.

Ensuite il faudrais aussi que ta classe existe dans ton code html :

html :
<table id="table">
<tr>
    <td>
        <a class="[b]add[/b]" href="#">Ajouter</a>
    </td>
</tr>

Si ton lien s'appelle ajouter, il semble quand même plus logique qu'il est une classe add
Modifié par matmat (02 Jun 2008 - 19:54)

matmat a écrit :
Peut-être que pour voir un résultat il faudrait déja mettre quelque chose dans tes balise a :

   $("#table").append("<tr><td><a class="delete" href="#">[b]Test[/b]</a></td></tr>");

Comme te la rajouté Florent.

Oui j'ai une image à la palce de Test, pour simplifier j'ai tout écris à la main j'ai oublié de le mettre desolé.

matmat a écrit :

Ensuite il faudrais aussi que ta classe existe dans ton code html :

html :
<table id="table">
<tr>
    <td>
        <a class="[b]add[/b]" href="#">Ajouter</a>
    </td>
</tr>

Si ton lien s'appelle ajouter, il semble quand même plus logique qu'il est une classe add

Oui j'ai bien ca aussi, je ne voyais pas l'interet ici de le rpeciser.

[quote=Florent V.]
À tester également:

function prepareDeleteLinks() {
	$("#table .delete").click(function() {
		alert("essai");
	});
}

prepareDeleteLinks();

$("#table .add").click(function() {
	$("#table").append("<tr><td><a class="delete" href="#">Test</a></td></tr>");
	prepareDeleteLinks();
});

Cette methode marche, je vais la garder merci beaucoup

Salut,

Un peu plus propre à mon goût :

function deleteClick() {
  alert("essai");
}

$("#table .delete").click(deleteClick);

$("#table .add").click(function() {
  $("<tr><td><a class='delete' href='#'>Test</a></td></tr>").
    appendTo($("#table")).find(".delete").click(deleteClick);
});

(non testé)
Modifié par Julien Royer (03 Jun 2008 - 00:07)

D'un autre coté je me pose la question d'utiliser ou non onclick="..." ou utiliser JQuery pou rca et faire du javascript non intrusive.
Mais ca a ses inconveniants je trouve, par exeple c'est plus facile avec onclick d'appellé une fonction en lui passant des paramètres alors que avec $('.maclass').click(); c'est pas possible.

J'aimerais bien avoir votre avis sur la question.

Merci

alien7 a écrit :
par exeple c'est plus facile avec onclick d'appellé une fonction en lui passant des paramètres alors que avec $('.maclass').click(); c'est pas possible.

Là je ne te suis pas... Qu'est-ce qui t'empêche de faire:

$m(".maclass").click(function(){
	maFonction(param1,param2,param3);
});

?
C'est bien ce qui est fait dans l'exemple que tu donnais dès le départ.

Non en fait je parle dans la page html, soit:

<a class="delete" href="/index.php?var='essai'"></a>

(Mais là on peut pas passer de paramètre)

ou

<a onclick="delete('essai');" href="/index.php?var='essai'"></a>

mais est ce que ca reste du javascript non inrtrusif ? Je pense que oui non ?

C'est une autre question bien sûr mais peut etre que ca pourra m'aider à simplifier le problème initial.
Pour l'instant j'utilise que $('?').click au lieu de onclick.

Merci

alien7 a écrit :
mais est ce que ca reste du javascript non inrtrusif ? Je pense que oui non ?

On s'en fout un peu en fait. Faire du javascript "non intrusif" n'est pas un but en soi. C'est juste une question de clareté et de maintenance.

alien7 a écrit :
Non en fait je parle dans la page html, soit:

<a class="delete" href="/index.php?var='essai'"></a>

(Mais là on peut pas passer de paramètre)

ou

<a onclick="delete('essai');" href="/index.php?var='essai'"></a>

Si le paramètre que tu veux passer à ta fonction delete correspond en effet au paramètre var passé dans ton URL (sans les quotes je suppose), tu peux aller le chercher dans le href du lien, avec un code qui ressemble à ça :

$("a.delete").click(function() {
  delete(/\?(?:[^\?]*&)?var=([^\?&#]*)[^\?]*$/.exec(this.href)[1]);
});

(non testé)
Modifié par Julien Royer (05 Jun 2008 - 10:33)