jQuery点击事件绑定onClick和on()

一、静态绑定
（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');
    });