有一个网站有一个主要 index.html页面(带有 <html><head>... )和类似 gallery.html 的页面, contacts.html ，但仅限 <div>容器和没有<html><head>... .
所以，当我点击index.html时链接至contacts.html会发生什么:
$('.contacts').click(function(e) {
e.preventDefault();
$('#content').load('contacts.html', function() {
.....
});
});
问:我应该如何为 click 等事件构建或组织 javascript 代码？上contacts.html ？
例如:
[1] 我可以写在contacts.html上JavaScript 代码如下:
<script type='text/javascript'>
$(function() {
$('.anyClassOnContactsHtml').click(function(e) {
.....
});
});
</script>
但正如我猜测的那样，每次加载 contacts.html 时它会再次读取函数，这就是网站的速度和性能可能较低的原因，因为我每个页面上都有 50 多个点击事件。
[2] 我可以写在index.html上代表们:
<script type='text/javascript'>
$(function() {
$('#content').on('click', '.anyClassOnContactsHtml', function(e) {
.....
});
});
</script>
它可以工作，浏览器会读取点击函数 1 次，但是对于 100 多个点击函数，会有 2-3 秒(!)延迟，因此运行速度非常慢。
为了更快地工作，我应该代替 #content写离我的.anyClassOnContactsHtml更近的容器，但我不能，因为 index.html只有#container .
那么，我该怎么办呢？或者还有其他方法来绑定(bind)事件吗？对于网站性能有什么建议吗？谢谢。
最佳答案
1)您实际上可以通过这种方式调用子元素。
${"#content .anyClassOnContactsHtml").click(function() {
});
2) 看看:http://developer.yahoo.com/yslow/ 。例如，放置 <script> <body>
</body>底部的标签将允许页面的其余部分更快地加载。
安装插件并在您的页面上运行测试。
关于javascript - jQuery:$.on 应该如何工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17767520/