jquery 插件重新绑定的处理方法分析


Posted in jQuery onNovember 23, 2019

本文实例讲述了jquery 插件重新绑定的处理方法。分享给大家供大家参考,具体如下:

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

<div class="expert">
  <div class="expert-list">
    <ul>
      <li class="expert-item">
        <a href="#" rel="external nofollow" rel="external nofollow" >
          <img src="./imgs/expert1.jpg" />
        </a>
      </li>
      <li class="expert-item">
        <a href="#" rel="external nofollow" rel="external nofollow" >
          <img src="./imgs/expert2.jpg" />
        </a>
      </li>
    </ul>
    <a class="prev" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" ></a>
    <a class="next" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" ></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>

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

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
Jquery异步上传文件代码实例
Nov 13 #jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
jquery获取input输入框中的值
Nov 13 #jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
You might like
一个简单的网页密码登陆php代码
2012/07/17 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
python中yield的用法详解
2021/01/13 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
法定代表人资格证明书
2014/09/11 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
2014年统计工作总结
2014/11/21 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
高一军训口号
2015/12/25 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
基于Go Int转string几种方式性能测试
2021/04/28 Golang
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python