Jquery on clic sur balise generée

**kramer Mc Barreth** · 27/09/2013, 19h53

Bonjour,

Je rencontre un probleme que je ne m'explique pas...

Mon code javascript genere une balise que j'ajoute ensuite au html du div conteneur, celui possede un id dynamique:

Code :

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

1
2
3
balise = "<mabalise id=\"Ins_"+compt_INS+"\" >"
    + donnee_Array[0] +"</mabalise>";
$("#conteneur").html(balise);

Cette balise possede son css, ce qui marche puisque le style est appliqué a la balise lors de l'affichage.

Cependant, lorsque j'essaye de coller un element onClick sur la balise generée, cela ne fonctionne pas.

Code :

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

1
2
3
$("balise").click(function(){
    alert('jquery');
});

J'ai un peu tout testé, l'appel par id, class ou directement par le nom de la balise, comme ci-dessus. Evidement je modifie le css et l'appel jquery.

Par contre si je colle le onClick a l'ancienne dans ma balise, cela fonctionne.

Code :

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

1
2
balise = "<mabalise id=\"Ins_"+compt_INS+"\" onClick=\"alert('test');\" >"
    + donnee_Array[0] +"</mabalise>";

Bon, du coup, ca marche c'est cool, mais pourquoi le JQuery ne fonctionne pas ?
Niveau organisation du code, c'est pas terrible...

Si quelqu'un as une idée...

**NoSmoking** · 27/09/2013, 21h43

Bonjour,
déjà je ne vois pas trop l'intérêt de créer une balise exotique mais...

Si quelqu'un as une idée...

il suffit d'utiliser la bonne terminologie, balise = "<mabalise id=\"Ins_"+compt_INS+"\" >" alors que $("balise").

**danielhagnoul** · 28/09/2013, 00h23

Bonsoir

Si vous créez un tag personnel, il faut définir son CSS et son comportement avant de l'ajouter au DOM.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	/*
	 * Si vous créez un tag personnel, il faut définir 
	 * son CSS et son comportement avant de l'ajouter 
	 * au DOM.
	 */
	$( "<mabalise/>", {
		 "id" : "baliseID",
		 "html" : '<p>Un texte quelconque pour remplir.</p>',
		 "css" : {
		 	"position" : "relative",
		 	"display" : "block",
		 	"width" : "20rem",
		 	"height" : "20rem",
		 	"border" : "0.3rem dotted orange",
		 	"margin" : "2.4rem",
		 	"padding" : "0.6rem",
		 	"overflow" : "hidden",
		 	"background-color" : "lightgreen",
		 	"color" : "blue"
		 },
		 "click" : function( event ){
		 	console.log( event.target );
		 },
		 "mouseenter" : function(){
		 	$( this ).animate( { "right" : "-=5rem" }, 5000 );
		 },
		 "mouseleave" : function(){
		 	$( this ).animate( { "right" : "+=5rem" }, 5000 );
		 }
	}).appendTo( "section.conteneur" );
 
});
 
$( window ).load( function(){
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-28T00:20:27.88+02:00" pubdate>2013-09-28T00:20:27.88+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**kramer Mc Barreth** · 29/09/2013, 15h47

Bonjour,

merci pour vos réponses.

Je voulais tester les balises exotiques par curiosité et pour des questions de lisibilité de mes pages générées.
Et finalement, il est très logique de devoir les définir... Silly me.

Merci !!

Jquery on clic sur balise generée

jQuery

Discussions similaires

Partager

Partager