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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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/04/20 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
python中字符串的操作方法大全
2018/06/03 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python字符串循环左移
2019/03/08 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
django 模型字段设置默认值代码
2020/07/15 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
临床护士自荐信
2014/01/31 职场文书
物理研修随笔感言
2014/02/14 职场文书
团委竞选演讲稿
2014/04/24 职场文书
团日活动总结书格式
2014/05/08 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python