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

这几天都在折腾自己的一款主题，这款主题使用了“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
});

搞完还是觉得心塞。