1
を使用して内線HTMLに含まれています。以下はのjQueryのMouseEnter機能は、私は外部ファイル「includesecondfile.htmlからHTMLを含めるようにJavascriptを使用したファイル「including.html」を持っているのJavascript
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>
です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>
の内容私は、ブラウザでこれを見たとき、includesecondfile.htmlからの要素が正しく表示され、H1、H2およびPすべてが正しく表示されます。 のjavascriptの2枚目時に動作します私はマウスの上に彼はincludes.htmlからH1要素をインポートしましたが、includeecondfile.htmlからインポートしたH1要素の上にマウスを置いてはいけません。奇妙なことは、CSSが両方のファイルからのh1sに影響を受けることです。つまり、メインファイルからh1要素をマウスオーバーするとh1の背景が黄色に変わりますが、インクルードされたファイルからh1要素をマウスオーバーすると黄色に変わりません。 インクルードされたファイルのh1要素をマウスオーバーすると、背景を黄色に変更するにはどうすればよいですか？
余分なHTMLが非同期に読み込まれているように見えるため、イベントハンドラはロードされる前にバインドされています。そのための修正点がありますが、CSSではちょうどホバーカラーの変更をしないのはなぜですか？あなたはJSを必要としません。 – nnnnnn
ありがとうnnnnnn、それはあなたが言った通りだった。私はJSをincludesecondfile.htmlに移動し、すべてが機能しました。私はJSについて学ぶためにこれを書いていますので、上記は単なるテストファイルです。 – Mark