快捷導(dǎo)航

jquery 插件重新綁定的處理方法分析

更新時間：2019年11月23日 10:44:22 作者：懷素真

這篇文章主要介紹了jquery 插件重新綁定的處理方法,結(jié)合實例形式分析了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>

現(xiàn)在需求是當(dāng)窗口大小發(fā)生改變時，這個slide也會發(fā)生相應(yīng)變化。

單純的用jquery去控制expert-list、expert-item和img的寬、高效果并不怎么好。

想法是，解除expert-list上的slide插件綁定，然后在窗口大小改變的事件處理函數(shù)中再重新綁定，結(jié)果并沒有找到解除綁定的方法。

笨辦法是，先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結(jié)構(gòu)，clone()好像會把行內(nèi)樣式也拷貝了。
    $(".expert").append(expert.html());
    $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true});
  });
</script>

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

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: