Ajax成功添加新DOM元素 jquery 绑定元素事件

开始之前，我要强调一件事情，看API事件很重要的事情，看API事件很重要的事情，看API事件很重要的事情！（真的很重要啊！）

为了要保证加载完页面上的DOM元素，再用jquery进行绑定相应的元素我们通常都用
$(document).ready(function(){这里放代码});或$(function(){这里放代码});

那么问题来了，如果页面上有通过 ajax 进行请求则成功返回有添加新的DOM元素

$(ajax){
        type: "get",
        url: 'url地址',
        data:{
           '参数': '值' 
        },
        success: function(data){
          $('body').append(<li id="new">new LI</li>);
        },
        error: function(data){
          alert("fail");
        }
      })

Ajax 的请求都是在$(document).ready(function(){})
之后执行的，所以如果你想对新增的 li 标签进行绑定相应的事件，我所知有两种方法：

• 对新增元素 再次进行绑定相应事件，例如在 Ajax 中的 success 返回函数中，再执行完新增元素的代码后进行绑定

• success: $('body').append("<li id='new'> new Li </li>");
  //这里统一用click事件为例
  $('#new').click(function(){});

  当然这种方式有一定的局限性，那么可以尝试第二种方式
  

• jquery中有诸多的绑定事件函数（具体的将在文章末尾进行简单的介绍）

• //这里我们用到的是 on()函数/(当然你也可以用 live()函数进行绑定,他们之间的区别将在末尾介绍);
    $("body").on('click','#new',function(){
        alert("捕获新增的id为 new 的 li 标签");
      }
    });

  .on()函数的用于为指定元素的一个或多个事件绑定事件处理函数
  最主要的是 on()函数执行后新添加，绑定事件对其依然有效

  //简单的演示on()
  // 为div中的所有p元素绑定click事件处理程序
  // 只有n2、n3可以触发该事件
  $("div").on("click","p",function(event){
      alert( $(this).text());
  });
  
  // 后添加的n6也可以触发上述click事件，因为它也是div中的p元素
  $("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');

  以上则可以解决怎么用 jquery 绑定新增 DOM元素了！！

• 大致介绍一下 jquery的绑定函数 和之间的区别(具体参考Jquery API 文档)：

• 要极为重要的注意jquery版本的不同带来的事件差异

  //为一个元素绑定一个事件处理程序
  .bind()

  //为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
  .delegate()

  //从元素中删除先前用.live()绑定的所有事件.
  .die()（弃用 > 1.7 版本弃用的 API | 已删除的函数）

  //接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。
  jQuery.proxy()

  //附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
  .live()（弃用 > 1.7 版本弃用的 API | 已删除的函数）

  //移除一个事件处理函数。
  .off()

  //在选定的元素上绑定一个或多个事件处理函数。
  .on()

  //为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。
  .one()

  //从元素上删除一个以前附加事件处理程序。
  .unbind()

  再次强调看API很重要，我就死在版本问题上导致事件不能相应，纠结许久。。。