ajax动态创建的元素，为什么不能直接获取到想要的元素绑定事件

darlingBaby_wq 2016-09-23 12:51:24

例如：$.ajax({
url:"../json/shop.json",
type:"get",
async:"false",
success:function(data){
//根据data创建所需的ul和li
}
})
以上出来的html为<ul><li>sdsd</li><li>sdsd</li><li>sdsd</li></ul>

然后我想用jq 获取$('ul>li').click(function(){console.log(1)})可是根本就没有效果

但是如果使用$('ul').on('click','li',function(){
console.log(1)
})确可以

这是为什么

...全文

773 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_35683066 2016-09-24

打赏
举报

使用事件代理 on( ) 对新添加的子元素也可以进行事件绑定，你可以查一下 bind( ) on( ) deleget( ) live( )--（不建议使用已废除）之间的区别

xiaoqiu_net 2016-09-23

打赏
举报

你绑定click事件，这是基于现有的DOM元素，on是绑定，是在你当前DOM元素加载完毕后

低调是种无声的高调 2016-09-23

打赏
举报

新手学习了

Go 旅城通票 2016-09-23

打赏
举报

$('ul的父元素，就是append那串html代码的容器选择器').on('click','li',function(){ console.log(1) })

逝_去_的_光_阴 2016-09-23

打赏
举报

动态创建的html元素需要用jquery的on或者live去绑定元素的事件，否则只能绑定现有的html元素

___紫菜 2016-09-23

打赏
举报

引用 3 楼 MrMicrosoft 的回复:

新手学习了

天际的海浪 2016-09-23

打赏
举报

$('ul>li').click(function(){}) 是直接在现有的li元素上绑定事件。这句代码执行之后再创建的li元素上没有事件。 $('ul').on('click','li',function(){}) 这是委托事件的绑定方式。事件实际是绑定在ul元素上的，当事件触发时会判断事件是否是经过li元素冒泡上来的，是则执行事件代码，不是则不执行。由于li元素上本来就没有绑定事件，所以之后再创建的li元素也可以正常触发。

木头海上漂 2016-09-23

打赏
举报

可以考虑使用on

木头海上漂 2016-09-23

打赏
举报

你这个选择器都没有选中
可以把你创建dom的对象在js中var一下。。然后操作这个变量

天际的海浪 2016-09-23

打赏
举报

引用楼主 qq_29138197 的回复:

例如：$.ajax({ url:"../json/shop.json", type:"get", async:"false", success:function(data){ //根据data创建所需的ul和li } }) 以上出来的html为<ul><li>sdsd</li><li>sdsd</li><li>sdsd</li></ul> 然后我想用jq 获取$('ul>li').click(function(){console.log(1)})可是根本就没有效果但是如果使用$('ul').on('click','li',function(){ console.log(1) })确可以这是为什么

$('ul>li').click(function(){}) 是直接在现有的li元素上绑定事件。这句代码执行之后再创建的li元素上没有事件。 $('ul').on('click','li',function(){}) 这是委托事件的绑定方式。事件实际是绑定在ul元素上的，当事件触发会判断事件是否是经过li元素冒泡上来的，是则执行事件代码，不是则不执行。由于li元素上本来就没有绑定事件，所以之后再创建的li元素也可以正常触发。