J'ai un fichier « including.html » où j'utilise le Javascript pour inclure du code HTML à partir d'un fichier externe « includesecondfile.html.fonction jQuery mouseenter ne peut pas déclencher sur l'élément inclus dans HTML en utilisant Javascript poste
including.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My First Document</title>
<link rel="stylesheet" type="text/css" href="including.css" />
<script type="text/javascript"src="http://ajax.aspnetcdn.com/ajax/jQuery /jquery-1.8.1.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<h1>My Web Page, I'm H1</h1>
<p>First P element. Welcome to my web page. Here you'll find all sorts of information about me.</p>
<h2>My Books second H2 element</h2>
<div id="menu"> </div>
<p>You can find information on my books here as well.</p>
<script>
$(function(){
$('#menu').load('includesecondfile.html');
});
</script>
<script>
$(function(){
$("h1").mouseenter(
function(){
$('h1').css('background-color', 'yellow');
}
);
$("h1").mouseleave(
function(){
$('h1').css('background-color', 'white');
}
);
});
</script>
</body>
</html>
Ci-dessous le contenu de includesecondfile.html
<hr>
<h1>Second file H1 element</h1>
<p>Here it is yo man secon paragraph element</p>
<h2>Second H2 element</h2>
<hr>
quand je regarde dans le navigateur, les éléments de la includesecondfile.html sont correctement affichés, h1, h2 et p tous les afficher correctement. le deuxième morceau de javascript fonctionne lorsque Je souris sur t Il élément H1 de include.html mais pas quand je souris sur l'élément H1 importé de includesecondfile.html. La chose étrange est que le CSS est affecté sur les h1 des deux fichiers. c'est-à-dire que les deux arrière-plans de h1 deviennent jaunes lorsque je souris sur l'élément h1 à partir du fichier principal mais ne jaunissent pas lorsque je souris l'élément h1 à partir du fichier inclus. Comment rendre l'arrière-plan jaune lorsque je passe la souris sur l'élément h1 du fichier inclus?
Il semble que le code HTML supplémentaire se charge de manière asynchrone, de sorte que le gestionnaire d'événements est lié * avant * le chargement. Il y a des correctifs pour cela, * mais *, pourquoi ne faites-vous pas les changements de couleur du survol juste en CSS? Vous n'avez pas besoin de JS pour cela. – nnnnnn
Merci nnnnnn, c'était comme tu l'as dit. J'ai déplacé le JS au includesecondfile.html et tout a fonctionné. Je suis en train d'écrire ceci pour en savoir plus sur JS donc ce qui précède ne sont que des fichiers de test pour jouer un peu avec. – Mark