问题描述
@某人
的锚点链接。由于主题顶部的导航占用了50px的高度,所以点击锚点链接的时候必须向下偏移原来的位置50px,才能正常显示。
即:以前写的js对动态生成的页面元素不管用!
举个很简单的demo,见下面的代码:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").bind("click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
</body>
</html>
这段代码很简单。有两个功能:
- 点击按钮会插入一个
<p>
标签及其内部内容 - 点击
p标签
会 隐藏 或 显示 当前 p 元素
但是这段代码的问题是:
点击按钮生成 p 标签,如果点击生成的这个 p 标签,则无法 隐藏 或 显示 当前 p 元素。
问题出在哪儿呢?
解决方法
原因在于,浏览器解析js代码的时候,会寻找当前页面的所有 p 标签,并给每个 p 标签绑定上相关事件(slideToggle())。
delegate()
方法。bind
绑定的点击(click)事件,只适用于当前页面的元素delegate
绑定的点击事件,却可以适用于当前或未来的元素(比如由脚本创建的新元素)。所以核心代码改成
$(document).ready(function(){
$("div").delegate("p","click",function(){
$(this).slideToggle();
});
});
delegate
的语法是:$(selector).delegate(childSelector,event,data,function)
selector
)的子元素(childSelector) ,监听某些事件(event),绑定相关函数(function)。该bug会在handsome v3.3.0 版本中得到解决
6 条评论
这个挺好用的。
看到你在首页的公告了...
其实有个事...新增接入备案是不用关站的
只要icp号还有就可以一直开着
我的icp号好像被注销了。。。但是腾讯云还是显示正常,不知道是不是腾讯云还没有检查出来
去icp公共查询那块查一下吧 那块实时准
对了你handsome主题的帮助文档的那个...是jelly的?(表示我已fork正在用23333,被我魔改的不成样子)#(滑稽)
不是,有一个项目叫docsify 在GitHub搜索一下就能找到了,用来写文档很方便ヾ(≧∇≦*)ゝ
那...我刚才看github上的demo比你这用的少一个index.html里的js...也应该是基于原项目改了吧φ( ̄∇ ̄o)