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

本文实例讲述了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常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • Vue.js列表渲染绑定jQuery插件的正确姿势

    使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件. 需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后 $().xxx绑定jQuery插件. 之前使用Vue.nextTick方法,在一次dom更新以后执行延迟回调,渲染jQuery插件. 然而这并不是一种很好的方式,有时候难以确定dom元素更新是否是我们需要关注的那个. 在列表中渲染Jquery插件的正确姿势,是使用自定义指令.自定义指令提供了一些钩子函数,可以准确的监听到dom元素与数据的绑定周期

  • Jquery 模板数据绑定插件的使用方法详解

    1 绑定后台数据到指定模板(无嵌套,内容均为后台数据原始信息,前台绑定)以通话记录页为例:首先指定目标容器: 复制代码 代码如下: <dl class="box_pannel_content_filled_border none" id="gvRecCalls">   <dd class="bg_blue">    <p class="width_level_half_2 fl nopitch"&

  • 一个可绑定数据源的jQuery数据表格插件

    一个可绑定数据源的jQuery数据表格插件

    固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML - 模板代码: 复制代码 代码如下: <table id="test"> <tr class="header"> <td style="width: 100px;" sort='true'> 姓名 </td> <td style="width: 100px;" sort='true'

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

  • jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

  • jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one().   有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现:   1. on()

  • jQuery事件的绑定、触发、及监听方法简单说明

    如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等.但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题. 下面简单的来说一下 jQuery 中事件的基础操作. 绑定事件和事件代理 在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件.语法: .on( events [, selector ] [, data ], handler ) event

  • Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    复制代码 代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem

  • Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

    Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

    00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的jQuery插件库,Ang

  • jquery移除、绑定、触发元素事件使用示例详解

    复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

  • jquery弹窗插件colorbox绑定动态生成元素的方法

    colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好. colorbox官网:http://www.jacklmoore.com/colorbox/ 刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过. 以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了. 常规的用法是这样的: 复制代码 代码如下: <a class="test" href="test.jpg" titl

随机推荐