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

最新推荐文章于 2023-08-01 14:27:18 发布

weixin_30778805

最新推荐文章于 2023-08-01 14:27:18 发布

阅读量922

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ltchu/p/5961554.html

本文详细介绍了JavaScript中静态绑定和动态绑定两种方式的应用实例，包括onclick方法、jQuery的id选择器和.on()方法的使用，展示了如何处理按钮点击事件并进行相应的后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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