多個按鈕綁定同一個點擊事件

<div class="div1">
    <ul class="link">
        <li>點擊</li>
        <li>點擊</li>
        <li>點擊</li>
    </ul>
    <ul>
        <li>點擊</li>
        <li>點擊</li>
        <li>點擊</li>
    </ul>
    <ul>
        <li>點擊</li>
        <li>點擊</li>
        <li>點擊</li>
    </ul>
</div>
<script>
    $(document).ready(function () {
          $('.div1').children('ul').each(function () {
              $(this).find('li').bind('click',function () {
                  alert('im groot');
              });
          })
    });
</script>

 以上用bind() 進行事件綁定。但是它有一個問題，動態添加的元素，無法觸發這個事件。這就涉及到了事件委托。

delegate(selector,[type],[data],fn) ，bind(type,[data],fn)

jQuery 3.0中已棄用這兩種方法，請用 on()代替。

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

使用 on() 方法添加的事件處理程序適用於當前及未來的元素（比如由腳本創建的新元素）。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

 於是只要把上面的bind()，改為on()即可。

    $(document).ready(function () {
        $('.div1').children('ul').each(function () {
            $(this).find('li').on('click',function () {
                alert('im groot');
            });
        })
    });