Question

我有Index.asp

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->

</body>
</html>

块/ header.asp

<div class="hideMeIamHeader"></div>

块/ bottom.asp

<div class="hideMeIambottom"></div>

块/ footer.asp

<div class="hideMeIamfooter"></div>
<button id="Hideheader">Hide Header</button>
<button id="Hidebottom">Hide bottom</button>
<button id="Hidefooter">Hide footer</button>
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});

});
</script>

如何使这个例子有效？我无法从.hideMeIamHeader

访问.hideMeIambottom和footer.asp

更新（已解决）

所以index.asp必须看起来像

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});

});
</script>
</body>
</html>

Answer 1

最可能的情况是，在设置点击处理程序时，DOM中不存在这些项目。您可以使用jQuery的ready（）函数来解决这个问题：

$(document).ready(function() {
    $('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
    $('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
    $('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});

jQuery文档：https://api.jquery.com/ready/

Answer 2

一旦DOM准备好，您的代码就应该执行，

$(document).ready( function(){
    //Your code goes here
    $('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
    $('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
    $('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});

更多说明：您的代码在加载文件时正在执行，而不是在加载整个页面时执行，因此当加载Javascript页面时，实际上没有创建页面和DOM元素，因此jquery无法找到元素。

首先，您需要加载所有DOM内容，然后加载DOM元素，因此，一旦DOM准备就绪，您应始终执行代码...

包含文件之间的Javascript事件委派

2 个答案: