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实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
如何在vue 中引入使用jquery
Nov 10 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
Vue发布项目实例讲解
2019/07/17 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
python中property和setter装饰器用法
2019/12/19 Python
Python callable内置函数原理解析
2020/03/05 Python
python super()函数的基本使用
2020/09/10 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
为什么要有struct关键字
2012/05/08 面试题
医学生实习自我鉴定
2013/09/27 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
分公司任命书
2014/06/06 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
班主任培训研修日志
2015/11/13 职场文书