Jquery添加新元素时，无法给新元素添加事件问题

当使用jquery动态添加元素时，无法给新元素添加事件，导致无法触发事件

下面是我的jquery无法触发的的代码：

$(function(){
      //这里是动态添加元素
      $(".add").click(function(){
        var btn = "<button class='newBtn'>新按钮</button>";
        $("body").append(btn);
      })//这里是为添加的元素添加事件
      $(".newBtn").click(function(){
        alert("这里是新添加的元素触发的事件");
      })
})

然后发现新添加的元素并不具有事件，所以也无法触发事件，下面开始解决这个问题：

1.利用on()事件来绑定：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

语法：$(selector).on(event,childSelector,data,function)

$("body").on("click", ".newBtn", function() {
   alert('这里是动态元素添加的事件');
});

其中：selector 添加元素的选择器。

childSelector 添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。（可选）

data 规定传递到函数的额外数据。（可选）

tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。

$(document).ready(function(){
　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

tip:如果你的事件只需要一次的操作，可以使用one()这个方法

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

当然，绑定方法还有 live()，delegate()，bind()，但是，这三种方法在 jQuery1.8之后都不推荐使用， 官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。