gpt4 book ai didi

javascript - jQuery:$.on 应该如何工作?

转载 作者:行者123 更新时间:2023-11-28 09:00:48 26 4
gpt4 key购买 nike

有一个网站有一个主要 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com