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中的deferred使用方法
Mar 27 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
用jQuery实现抽奖程序
Apr 12 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
JavaScript效率调优经验
2009/06/04 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python中list列表的高级函数
2016/05/17 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
房地产还款计划书
2014/01/10 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
个人银行贷款担保书
2014/04/01 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
世界遗产导游词
2015/02/13 职场文书
Python类方法总结讲解
2021/07/26 Python