登录

javascript - ajax加载出来的html绑定事件

一个博客列表样式的网站,文章列表采用ajax下拉加载。ajax加载的html怎么绑定一个jq事件呢?
在网上查了很多资料。都说是用.on 我测试了.on是可以,但是我这个需求跟网上说的又不太符合,所以只好前来提问。

html部分:

<!--一个文章列表模块开始--->
<dl class="post">
    <h2>标题</h2>
    <a href="javascript:;"  class="test-on" >anniu</a>
    <p style="display:none" class="js-box">js操作内容块</p>
</dl>
<!--一个文章列表模块结束--->

要的效果,点击"test-on"展开"js-box"。文章模块的".post"是ajax下拉加载的。

我写的js代码:

$(".post").each(function(){ 
    var _this = this
    $(this).on("click",".test-on",function(){
        $(_this).find(".js-box").fadeToggle();
    })
});

对比网上找的资料,我的疑问点是:怎么让点击按钮点击后只在其所在对应的文章模块内生效?

# JavaScript
PHP中文网PHP中文网2146 天前535 次浏览

全部回复(2) 我要回复

  • 高洛峰

    高洛峰2017-04-11 12:04:13

    如果.post是Ajax加载的,那么你应该把事件绑到它的父元素上。比如:

    $('#root').on('click', '.test-on', function() { //这里假设.post的父元素是#root
        $(this).next('.js-box').fadeToggle(); //$(this)即是event.target,当前点击的目标元素
    }

    不用循环绑定,这段写在ready回调里就可以了。

    回复
    0
  • 大家讲道理

    大家讲道理2017-04-11 12:04:13

    因为你的列表有多个建议使用事件代理,这样性能更好;

    $('.post').parent().on('click', '.test-on', function() { //此处使用事件代理
        $(this).next('.js-box').fadeToggle(); //这里使用next选择器,可以快速定位到对应的文章模块
    }

    回复
    0
  • 取消回复发送