jQuery多个按钮绑定同一个点击事件 响应多个按钮点击请求

在前端页面开发过程中，经常会遇到有多个按钮，需要响应同一个AJAX的点击请求，可以参考下面代码

<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');
            });
        })
    });