Jquery on clic sur balise generée

Version imprimable

27/09/2013, 19h53
kramer Mc Barreth

Jquery on clic sur balise generée
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:

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:

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:

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...
27/09/2013, 21h43
NoSmoking

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

Citation:

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

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

Bonsoir

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

Code:

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>

29/09/2013, 15h47
kramer Mc Barreth

Bonjour,

merci pour vos réponses. :ccool:

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