jquery bind方法与on方法 区别

1.参数不同

.bind(events,[eventData],handler)
.on(events,[selector],[data],handler)
.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
$(‘ul’).on(‘click’, ‘li.child1’, function(){console.log(‘click’);})
就是筛选出ul下的类名为child1的li给其绑定click事件；

2. 给动态添加的元素绑定指定事件用on方法

<div class="content1">
  <div class="child" style="background: khaki">content1原有</div>
</div>
<button>content1增加一个child元素</button>
<script>
  $(function () {
    $('button').click(function () {
      //动态添加新元素
      $('.content1').append('<div class="child" style="background:darkseagreen">content1新增</div>')
    })
    $(".content1 .child").bind("click",function () {
      console.log('bind方法',$(this).text())
    })
    $(".content1").on("click",".child",function () {
      console.log('on方法',$(this).text())
    })
  })
</script>

3. on方法事件委托

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
  $(function () {
    $('ul').on('click','li',function () {
      $(this).css('background','lightsalmon').siblings().css('background','#fff')
      console.log($(this).index())
    })
  })
</script>