Jquery中bind綁定和on綁定的區別


定義:從jquery1.7后推薦使用on綁定事件,on()是bind(), live(), delegate()方法的替代品。

注意:值得注意的是:on不僅僅作用於當前綁定的元素,對於未來有腳本語言創建的元素也會有同樣的作用。

移除:如果要移除on()事件,請是用off();

使用場景:在我的項目中有這樣的一種情況,需要動態的添加列表的元素。我在添加元素的時候每次都要為添加的元素bind相應的click等方法。這很讓人煩惱,有沒有執行一次就可以自動為我沒次添加的元素綁定相應的事件呢?

只要你是用的是jquery1.7+版本這時候變可以替換成bind方法為on方法。在容器初始化的時候使用on方法為容器中的元素綁定事件即可。

例子--使用bind/on綁定事件:

有一個值得注意的地方是,在使用on綁定事件的時候應該委托其父元素,查找子元素進行綁定。直接在子元素上綁定方法,無法實現實時綁定的效果。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 使用bind為頁面初始化時為ul中li元素綁定hover事件
            //*
            $("ul li").bind('click', function(){
                $(this).css({'background': 'green'});
                // 新添加的此元素不具備點擊的能力
                $(this).parent().append("<li>I don't  know how call me comeing. If you click my body , i cant do anything.</li>");
            });
            //*/
            /*
            // 使用on為頁面初始化時為ul中li元素綁定hover事件
            $("ul").on('click', 'li', function(){
                $(this).css({'background': 'green'});
                // 新添加的此元素具備點擊的能力
                $(this).after("<li>I don't  know how call me comeing. If you click my body , i cant anything</li>");
            });
            */
        });
    </script>
  </head>
  <body>
        <ul>
            <li>I'm first node. If you click my body , I well change my body to green and pull a new node in below.</li>
        <ul>
  </body>
</html>

 總結:

我並未做深入的研究,比如bind方法怎么實現的,bing,on之間的優劣對比。我卻是找到了一個別人的帖子講的比較仔細,希望有時間我也可以仔仔細細的研究研究。但是今天,先到這里,將連接奉獻,以供參考。

http://www.jb51.net/article/67166.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM