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

時間 2019-11-21

標籤 jquery bind 綁定區別欄目 JQuery 简体版

原文原文鏈接

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

注意：值得注意的是：on不單單做用於當前綁定的元素，對於將來有腳本語言建立的元素也會有一樣的做用。css

移除：若是要移除on()事件，請是用off();html

使用場景：在個人項目中有這樣的一種狀況，須要動態的添加列表的元素。我在添加元素的時候每次都要爲添加的元素bind相應的click等方法。這很讓人煩惱，有沒有執行一次就能夠自動爲我沒次添加的元素綁定相應的事件呢？java

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

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

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

<!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>

總結：this

我並未作深刻的研究，好比bind方法怎麼實現的，bing，on之間的優劣對比。我倒是找到了一個別人的帖子講的比較仔細，但願有時間我也能夠仔仔細細的研究研究。可是今天，先到這裏，將鏈接奉獻，以供參考。spa

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。