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

**comode** · 30/07/2014, 18h16

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 :

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
<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

**NoSmoking** · 30/07/2014, 19h57

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 !

**comode** · 30/07/2014, 20h46

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.

**danielhagnoul** · 30/07/2014, 20h52

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 :

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

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" );
 
});

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

jQuery

Discussions similaires

Partager

Partager