1
를 사용하여 내선 HTML에 포함되어 있습니다.의 jQuery mouseenter 기능은 내가 파일 내가 외부 파일에서 "includesecondfile.html HTML을 포함하는 자바 스크립트를 사용하여"including.html "가 자바 스크립트
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는 모두 보여 올바르게. 두 번째 조각 자바 스크립트의 때 작동 나는 T 이상 마우스. 그는 H1 요소를 including.html에서 가져 왔지만 includeecondfile.html에서 가져온 H1 요소 위에 마우스를 올려 놓지 않은 경우는 그렇지 않습니다. 이상한 점은 CSS가 두 파일의 h1에 영향을 준다는 것입니다. 즉, h1의 배경이 노란색으로 변할 때 주 파일에서 h1 요소를 마우스 오버 할 때 포함 된 파일에서 h1 요소를 마우스로 가리키면 노란색으로 바뀌지 않습니다. 포함 된 파일의 h1 요소를 마우스 오버 할 때 배경 변경을 노란색으로 만들려면 어떻게해야합니까?
추가 HTML이 비동기 적으로로드되는 것처럼 보이므로 이벤트 핸들러가로드되기 전에 바인딩됩니다. 거기에 대한 수정, *하지만 *, 왜 그냥 CSS에서 마우스를 가져가 색상 변경하지 않아? 그것을 위해 JS가 필요하지 않습니다. – nnnnnn
감사합니다 nnnnnn, 그것은 당신이 말한 것과 같았습니다. JS를 includesecondfile.html로 옮겼다. 나는 JS에 대해 배우기 위해이 글을 쓰고있다. 그래서 위의 내용은 약간의 테스트 파일이다. – Mark