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

**vickson007** · 09/10/2021, 21h42

index.html

Code html :

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

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

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

index.js

Code :

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

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

**mathieu** · 10/10/2021, 11h38

au moment où le code $("#btn-click").click(... est exécuté, le bouton n'existe pas encore donc l'action du clic ne peux pas y être accrochée.
pour faire cela, vous devez l'accrocher à un élément parent comme cela par exemple :

Code :

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

1
2
3
4
 
    $(document).on("click", "#btn-click", function () {
        alert("hello");
    });

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

jQuery

Discussions similaires

Partager

Partager