jquery 处理重新绑定插件的方法(angular2亲测可用)

比如有一个slide的jquery插件,页面打开就对dom进行了绑定。

<div class="expert">
    <div class="expert-list">
        <ul>
            <li class="expert-item">
                <a href="#">
                    <img src="./imgs/expert1.jpg" />
                </a>
            </li>
            <li class="expert-item">
                <a href="#">
                    <img src="./imgs/expert2.jpg" />
                </a>
            </li>
        </ul>
        <a class="prev" href="javascript:void(0)"></a>
        <a class="next" href="javascript:void(0)"></a>
    </div>
</div>
<script type="text/javascript">
    $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true});
</script>

现在需求是当窗口大小发生改变时,这个slide也会发生相应变化。

单纯的用jquery去控制expert-list、expert-item和img的宽、高效果并不怎么好。

想法是,解除expert-list上的slide插件绑定,然后在窗口大小改变的事件处理函数中再重新绑定,结果并没有找到解除绑定的方法。

笨办法是,先clone()一份,然后在把原先的dom删除再添加,再重新绑定。

<script type="text/javascript">
    var expert = $(".expert").clone();
    $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true});
 
    $(window).resize(function () {
        $(".expert").empty();
 
        //这里只需添加html结构,clone()好像会把行内样式也拷贝了。
        $(".expert").append(expert.html());
        $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true});
    });
</script>

缺点:此方法的效率并不怎么高。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 比如有一个slide的jquery插件,页面打开就对dom进行了绑定。 现在需求是当窗口大小发生改变时,这个sli...
    凡凡的小web阅读 2,910评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,910评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,278评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,935评论 0 1
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,274评论 0 8

友情链接更多精彩内容