冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室
ajax加载出来的html绑定js事件
fmj 发布于 2017年02月19日 86 浏览 0 评论
这几天都在折腾自己的一款主题,这款主题使用了“infinitescroll.js”用来ajax下拉加载文章列表。
问题来了,文章列表中有一个分享按钮,点击才会展开所有分享的选项。
jq写起来很简单:
$(".share-on").click(function () { $(".share-box").fadeToggle(); });
但是这样写的话,ajax加载出来的html里面是不会生效的。网上搜索了很多资料,问题出在ajax是异步加载,而这个jq绑定的事件则只能在本页面生效。
继续搜索,很多资料都写了用“.on”来委托,大意是将“.share-on”这个事件委托到父元素上面去,对于我这种js菜鸟来说。简单的“.on”对照着写出来还是没啥问题的。
$(document).on('click', '.share-on', function() { $(".share-box").fadeToggle(); });
恩,很好,生效了。但是...
按钮点击展开这个行为必须在按钮所在的文章列表内才能生效,否则就是点击所有的都展开了,我之前用的是“.each”遍历和“.find”查找。
之前代码如下:
$(".post").each(function(){ var _this = this $(this).find(".share-on").click(function(){ $(_this).find(".share-box").fadeToggle(); } });
然后这个“.each”和“.find”和“.on”就把我搞懵逼了,完全理不清中间的逻辑,最后只好去“segmentfault”发了一个提问,在得到热心网友的解答后折腾出来的正确代码:
$('.main').on('click', '.share-on', function() { //将“.share-on”委托到.post是父元素上面去 $(this).next('.share-box').slideToggle(); //用.next来查找而不是用.find });
搞完还是觉得心塞。
猜你喜欢
- 03-28 ajax验证表单提交
- 04-28 点击不同的单选按钮(radio)出现不同的内容
×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室