jquery中的on方法能否为ajax新增的元素绑定事件？

jQueryon()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event,childSelector,data,function,map)

由此扩展开来的几个以前常见的方法有.

bind()

$("p").bind("click",function(){

alert("Theparagraphwasclicked.");

});

$("p").on("click",function(){

alert("Theparagraphwasclicked.");

});

delegate()

$("#div1").on("click","p",function(){

$(this).css("background-color","pink");

});

$("#div2").delegate("p","click",function(){

$(this).css("background-color","pink");

});

live()

$("#div1").on("click",function(){

$(this).css("background-color","pink");

});

$("#div2").live("click",function(){

$(this).css("background-color","pink");

});

以上三种方法在jQuery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。

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

});

trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)

$(document).ready(function(){

$("input").select(function(){

$("input").after("Textmarked!");

});

$("button").click(function(){

$("input").trigger("select");

});

多个事件绑定同一个函数

$(document).ready(function(){

$("p").on("mouseovermouseout",function(){

$("p").toggleClass("intro");

});

多个事件绑定不同函数

$(document).ready(function(){

$("p").on({

mouseover:function(){$("body").css("background-color","lightgray");},

mouseout:function(){$("body").css("background-color","lightblue");},

click:function(){$("body").css("background-color","yellow");}

});

绑定自定义事件

$(document).ready(function(){

$("p").on("myOwnEvent",function(event,showName){

$(this).text(showName+"!Whatabeautifulname!").show();

});

$("button").click(function(){

$("p").trigger("myOwnEvent",["Anja"]);

});

传递数据到函数

functionhandlerName(event)

{

alert(event.data.msg);

}

$(document).ready(function(){

$("p").on("click",{msg:"Youjustclickedme!"},handlerName)

});

适用于未创建的元素

$(document).ready(function(){

$("div").on("click","p",function(){

$(this).slideToggle();

});

$("button").click(function(){

$(

"Thisisanewparagraph.
"

).insertAfter("button");

});

网站题目：jquery中的on方法能否为ajax新增的元素绑定事件？
文章路径：https://www.syh-b.com/qtweb/news49/594549.html

圣合创意、聚焦快消品商业设计品牌整合设计14年；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：圣合创意

成都圣合创意品牌整合设计为您推荐相关内容