包含的文件之间的Javascript事件委托
Javascript event delegation between included files
我有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>
如何使这个例子工作?我不能从footer.asp
访问.hideMeIamHeader
和.hideMeIambottom
更新(解决)
所以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>
最可能的情况是,在设置单击处理程序时,这些项还不存在于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/
你的代码应该在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准备好了…
相关文章:
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何在jQuery中获取两个事件之间的时间差
- Angularjs事件与发布/订阅指令之间的通信
- 如何在JavaScript中测量交互和mousedown事件之间的延迟
- jQuery:存储自定义事件之间的数据
- Socket.IO:如何在同一服务器中的Socket.on()事件之间通信/交换数据
- 如何识别源自JS脚本的http请求与HTML
- j查询复选框的更改和单击事件之间的差异
- 在事件之间传递变量
- 用户名实时更改中的 keyup() 事件和 change() 事件之间的差异
- jQuery mobile - 如何在
和 Click 事件之间连接 - 如何在两个onclick事件之间传递参数
- js文件或html模板中的init事件之间的区别
- 在两个jQuery点击事件之间传递数据
- .click()事件之间的jQuery焦点
- html页面显示和加载事件之间的区别是什么?
- 在许多事件之间找到顺序
- 在鼠标事件之间传递数据
- 拖放事件之间是否有定义的顺序
- 层叠鼠标事件之间的Div与画布在它的顶部