jQuery动态绑定生成的元素

有一次课程上,一个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})在回调函数里设置,意为加载完成了回调此函数设置