使用JQ提供的.on()和.delegate()方法可以解决解决此问题,给动态加载的元素成功绑定上事件,但是在这两种方法的参数中一定得写上我们需要绑定事件的那个元素选择器。
如:$("#parent").on("click",".list",function(){ }) 和 $("#parent").delegate("click",".list",function(){ }) 。
这两种方法内的参数 .list 就是我们动态加载出来需要绑定事件的那个元素,前面的 #parent 是 .list 元素的父元素。
//javascript 代码
//.list为新闻里的每一条公告,是我们动态创建的;#parent是一个包裹着里的这一行行公告的一个div。
//一般来说,我们绑定事件的写法都是用下面的第一和第二种写法。但是这种写法是绑定不上的。
$('#parent .list').click(function(){//1.直接使用click(fn)方法绑定不上
console.log($(this).html());
})
$('#parent .list').on('click',function(){//2.使用on("click",fn)方法还是绑定不上
console.log($(this).html());
})
$('#parent').on('click','.list',function(){//3.此种写法可以成功绑定
//使用on("click","...",fn),在on里面增加一个参数(需要绑定的那个节点),同时前面调用.on方法的元素改为该节点的父元素即:$('#parent')
console.log($(this).html());
})
$('#parent').delegate('click','.list',function(){//4.此种写法可以成功绑定
//使用delegate("click","...",fn),在delegate里面增加一个参数(需要绑定的那个节点),同时前面调用.delegate方法的元素改为该节点的父元素即:$('#parent')
console.log($(this).html());
})
END