当使用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()方法。