一.使用元素的事件属性:onxxx="f()"
二.使用jquery对象:选择器.xxxx(function(){
//js
});
缺陷:这只能给固有元素添加事件
固有元素:当调用事件函数给元素添加事件时,如果元素已经生成,则这些元素叫做固有元素
动态生成的元素:当调用事件函数给元素添加事件时,如果元素还没有生成,后来生成的元素。
错误示例:
//当市场活动主页面加载完成,查询所有数据的第一页以及所有数据的总条数
queryActivityByConditionForPage(1,10);
//给查询按钮添加单机事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
});
$("#tBody input[type='checkbox']").click(function () {
//如果列表中的所有checkbox都选中,这“全选”按钮也选中
if ($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
$("#checkAll").prop("checked",true);
}else{//如果列表中的所有checkbox至少有一个没选中,则全选按钮也取消
$("#checkAll").prop("checked",false);
}
})
这里的 $("#tBody input[type='checkbox']").click(function ()函数执行的时候元素还没有加载出来:这里的元素加载是在queryActivityByConditionForPage(1,10);这个函数里面通过异步请求查询出结果后才能被加载,所以说这里是异步请求不会等结果出来后才继续执行后面的代码,而同步请求相反会等结果出来后再继续执行后面的代码。
三.使用jquery的on函数给动态生成的元素加事件:
父选择器.on("事件类型","子选择器",function(){
//js
});
父元素:必须是固有元素,可以是直接父元素,也可以是间接父元素。
事件类型:跟事件属性和事件函数一 一对应。
子选择器:目标元素,跟父选择器构成一个父子选择器