Récupérer les data d'une éléments HTML sans ID dans une fonction

Version imprimable

Bonjour,

je souhaite utiliser les attributs html DATA pour passer des paramètres à une fonction qui peut (entre autre) être appelée en réaction à un événement quelconque (genre un click).

Lorsque l'élément qui appel cette fonction est créé dynamiquement via jquery, pas de problème, ça fonctionne. Si cet élément est présent statiquement dans le code HTML, ça ne marche plus...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <script language="javascript"> function MaFunc(event) { alert($(this).data("id")); } $(function(){ $("<a />").text("hop").data("id", 10).on("click", MaFunc).appendTo($("body")); }); </script> <html><head></head> <body> <a data-id="10" onclick="MaFunc(event);">paf le code</a><br /> </body> </html>
Dans cet exemple, ça marche si on click sur "hop", mais ça ne marche pas si on click sur "paf le code"...
Comment puis-je donc récupérer en jquery ce data-id depuis un éléments html (<a>) qui n'a pas d'ID propre ?

En vous remerciant

30/07/2014, 19h57
NoSmoking

Bonjour,
attention à ne pas confondre les 2.
Dans un cas event est un élément jQuery dans l'autre c'est un Event.

Dans le cas du onclick inline tu peux récupérer l'id en utilisant la propriété dataset.

Mais je ne vois pas bien l’intérêt !
30/07/2014, 20h46
comode

L’intérêt du onclick() inline ?

C'est à cause du Ajax. Il m'arrive de devoir charger du HTML via des appels ajax. Lorsque cela se produit, si le code retourné contient des éléments qui doivent réagir à des événements, il faut re-executer les fonctions jquery qui vont mettre les listener sur les éléments html chargés.

Après, je début en JQuery. Si tu penses que je suis sur une mauvaise voie, je suis preneur de tout conseil.

En tout cas, merci pour la réponse.

Bonsoir

Mélanger le jQuery et le Vanilla JS dans le même bloc de code c'est souvent une source de complications et d'erreurs.

Malgré le mélange des genres, il y a une solution simple en jQuery :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function MaFunc( event ) { console.log( $( event.target ).data( "id" ) ); } $( function(){ // forme abrégée de $(document).ready(function(){ $( "<a />", { "text" : "hop", "data-id" : "10", "click" : MaFunc }).appendTo( "body" ); });