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();
    }); 

二、動態繫結

支援給動態元素和屬性繫結事件的是on，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');
    });