一、静态绑定
(1)onclick方法
jsp代码
<button href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default" onClick = "audit('{{info.id}}')">审核</button>
js事件处理
function audit(absenceId) {
//弹出对话框
$.confirm("确认审核", function() {
//确定,发送post请求
$.post("/leave/audit", {
"absenceId" : absenceId,
}, function(data) {
//成功,跳转到指定页面
location.href = "/qingjia/index";
}, 'json');
}, function() {
//点击取消后的回调函数
});
}
(2)通过jQuery的id选择器用.click()绑定点击事件
这种方式不支持给动态元素或者样式重新绑定事件。
jsp代码
<a href="javascript:;" id="release-button" class="weui_btn weui_btn_primary">发布</a>
<a href="javascript:;" id="cancel-button" class="weui_btn weui_btn_default">取消</a>
js事件处理
$("#release-button").click(function() {
content = $("#content").val();
if (!content) {
showTips("请输入内容");
return;
}
publish();
});
$("#cancel-button").click(function() {
window.history.back();
});
二、动态绑定
支持给动态元素和属性绑定事件的是o()n,on前面的元素必须在页面加载的时候就存在于dom里面,动态的元素或者样式等,可以放在on的第二个参数里面。
jsp代码
<button href="javascript:;" id="delete-button" data-id="{{info.id}}" class="weui_btn weui_btn_mini weui_btn_default">删除</button>
js代码
$("#gridBody").on("click", "#delete-button", function() {
var $this = $(this);
id = $this.data('id');
$.post("/daily-notice/deleteNotice", {
"id": id
}, function(data) {
if(data.data == -1) {
alert("删除失败!");
} else {
$this.parents('#notice-cell').remove();//ajax移除节点
alert("删除成功!");
}
}, 'json');
});