-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjqcontingutdinamic.html
44 lines (41 loc) · 1.91 KB
/
jqcontingutdinamic.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CONTINGUT DINÀMIC</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--CARREGAR FRAMEWORK DE JQUERY-->
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="button" id="crear" value="crear">
<h1>Després del boto</h1>
<input type="button" class="btn-saludar" value="saludar">
<script language = "javascript">
$(function(){
var n = 0;
$("#crear").click(function(){
var body = $("body");
var titol = $("h1");
n++
/*body.append("<p>HOLA"+n+"</p>");
body.prepend("<p>"+n+"HOLA</p>");
titol.after("<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit"+n+"</p>")
titol.before("<p>"+n+"accusantium distinctio illo nisi numquam vel commodi?</p>")*/
body.append("<p><input type='button' value='SALUDAR 2' class='btn-saludar'></p>");
})
/*Substitut del segïuent codi, ja que mentre es carrega la pàgina l'únic botó ja esxisten amb la classe és el que està directamente en el body
això fa que els nous botons no executin l'acció
$(".btn-saludar").click(function(){
alert("HOLA");
})
*/
$(document).on("click",".btn-saludar",function(){/*En la pàgina si hi ha un element amb la calsse btn-saludar executa tal acció*/
alert("Hola");
});
});
</script>
</body>
</html>