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