有一次课程上,一个html里面有一个li,然后根据条件生成了若干个平行的li,后来需要给li添加点击事件,但是通过
$('li').click(fn)
绑定并没有成功,结果是只有静态页面里面有的那个li能起作用,原因是通过ajax异步请求生成的元素完成的时间是未知的,在绑定点击事件的时候有可能异步数据还没有返回,所以事件失效.
解决办法(二选一):
将ajax请求的async属性设置为false;
动态绑定未知元素的方法
$(document).on('click','#a1',fn)/*给已有的或将来会出现的document下的id为a1的元素绑定点击事件,回调fn*/
$('#a1').on('click',fn)/*简写*/
下面就是一个例子:
给通过ajax请求动态生成的id为'book_list'的元素下的li元素绑定点击事件(通常使用动态绑定元素方法而不将ajax设置为同步)
$('#book_list').on('click','li',function(){ $('#note_list').empty(); /*每个笔记本绑定的笔记本id*/ var notebook_id=$(this).data('notebook_id'); alert(notebook_id); $.ajax({ url:'/note/note/list.do', type:'post', data:{'notebookId':notebook_id}, dataType:'json', success:function(result){ for(var i=0;i<result.length;i++){ //code } }, error:function(result){ //code } }); });
如果需要参数传递:
比如,需要在加载的页面中的文本框里设置值,如果在load完成了之后设置是实现不了的,要通过$.load(url,data,function(){setPrams})在回调函数里设置,意为加载完成了回调此函数设置