[AJAX] Script ne fonctionnant pas après exécution de la fonction load

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
 
    <a href="#clic" id="index-click">Cliquez-moi</a>
 
    <div id="root"></div>
 
    <script src="js/jquery.js"></script>
    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>

include.html

Code:

1
2
3
<h1>Include</h1>
 
<button id="btn-click">Cliquez moi</button>

index.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function(){
 
    $("#index-click").click(function(event){
        $("#root").load("include.html");
    })
 
    $("#btn-click").click(function(){
        alert("hello");
    })
 
})

Le problème que je rencontre c'est que lorsque je clic sur lien de la page index et que la page include est inclut lorsque je clic sur le btn de la page include la boite de dialogue alert ne s'affiche pas