fmj.me

FMJ.me

一个靠自学的菜鸟,只会html+css,JavaScript是什么鬼?php?我靠,好高大上!

冯美杰就是我。单纯的个人博客,只做记录,别无其他。

Powered By Z-BlogPHP,Theme By zblog模板

当前位置:网站首页 技术学习 正文

ajax加载出来的html绑定js事件

FMJ发布于3年前 (2017-02-19) 1490 浏览 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
});

搞完还是觉得心塞。

jq find ajax on each

上一篇: 来冒个泡

下一篇: 玛德制杖

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

请填写验证码