javaScript学习笔记---在click中绑定click事件应该这么使用

最新推荐文章于 2023-01-02 11:28:49 发布
最新推荐文章于 2023-01-02 11:28:49 发布
阅读量243 收藏
点赞数
分类专栏： javascript学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34964399/article/details/79362633
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .hidden{
            display:none;

    </style>
</head>
<body>
   <input id="a" type="button" value="a"/>
   <input id="b" type="button" value="b" />
   <div id='i1' class="hidden" style="margin:0 auto;width:300px;height:200px;background-color:grey">
       <input id='i2' type="button" value="确认"  />
       <input type="button" value="取消" οnclick="Cancel()"/>
   </div>
<script src="jquery-1.12.4.js"></script>
    <script>
        $('#a').on('click',function(){
            $('#i1').removeClass('hidden');
            $('#i2').off().on('click',function(){
                console.log('a');
            })
        })

        $('#b').on('click',function(){
            $('#i1').removeClass('hidden');
            $('#i2').off().on('click',function(){
                console.log('b');
            })
        })

//       下面这种方式不行，如果你点击了取消，下次再点击b，再点确认就会输出2次b。而且这样，即使a中写了off(),但是如果点击a
        //在点击取消，再点击b，确认，会输出a和b，所以要a ， b 同时写off
        $('#b').on('click',function() {
            $('#i1').removeClass('hidden');
            $('#i2').click(function () {
                console.log('b');
            })
        })

        function Cancel(){
            $('#i1').addClass('hidden');
        }

    </script>
</body>
</html>



xiaoa~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js第13天（事件绑定方式）
weixin_61884985的博客
09-04 2632
js事件的绑定方式，事件的执行机制，以及事件传播以及事件委托。
JS绑定事件
weixin_44540251的博客
01-17 998
开发工具与关键技术：DW 作者：文泽钦 撰写时间：2019年1月17日 目的：实现一些js简单绑定按钮事件 分享一些简单的js绑定事件给一些刚入门的网友玩玩，代码简单点实现的功能虽然也少点，但不要急，一步一步来，先刷点成就感。学会这一点，也可以做一些好玩的事。 Js对话框没被绑定前，一打开网页就自动执行，有些用户感觉好玩，有些用户也会嫌它烦，那就要考虑要不要用绑定事件了。具体要用那种方式提醒用户，...
js click 与 onclick 事件绑定,触发与解绑
weixin_43804804的博客
11-27 769
click 与 onclick 1、onclick 事件会在对象被点击时发生。 &lt;input id="btn1" type="button" onclick="test();" /&gt; function test() { alert("我是行间事件"); } //当点击id="btn1"时,触发onclick事件 2、onclick事件会在click事件之前执行 &am
jQuery click 函数里嵌套click 出问题了
weixin_30892889的博客
01-04 118
下面实现html弹出层的示意代码： $("#appearHiddenDiv").click(function(){　　　　$("#hiddenDiv").css({display:"block"});　　　　$("#closeHiddenDiv").click(function(){　　　　　　　　//alert("erhsh test");　　　　$("#hiddenDiv").cs...
关于点击click事件以及事件绑定的方式
热门推荐
Hello World
04-26 3万+
Javascript简单地为一个标签绑定事件写法（不单针对button标签）：<button onclick="click_fn()">click</button> <script> function click_fn(){ console.log(this); } </script>另一种是用DOM Document对象来绑定事件： （注：这
【js】js绑定事件的三种方法
最新发布
michiko98的博客
01-02 3747
js 绑定事件 原生js
JS-绑定事件3种方法
SYQ15544423296的博客
06-30 8322
JS-绑定事件3种方法
前端面试题(4)iframe有哪些优点？iframe缺点是什么？
mrchengzp的博客
10-26 7352
优点： iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。 缺点： iframe会阻
Javascript绑定click事件的四种方式总结
pygodnet的博客
09-22 1万+
一：HTML中添加onclick &lt;button id="vv" onclick="myfunction()" &gt;哈哈&lt;/button&gt; 二：JS中定义函数绑定事件！ var funcc = function () { alert('我爱编程') } var aa = document.getElemen...
jquery的click事件用法
天空守护云
03-06 691
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
Javascript中点击（click）事件的3种写法
默茉的博客
04-18 1万+
方法一： <!DOCTYPE html> <html> <head> <title>Javascript中点击事件方法一</title> </head> <body> <button id="btn">click</button> <script type="text/javas...
js中事件绑定,$("body").on("click")与$("").click()区别
梦里回忆-专栏
10-07 1万+
事件绑定
js click 与 onclick 事件绑定,触发与解绑
weixin_33858485的博客
10-27 333
click 与 onclick 1.onclick 事件会在对象被点击时发生。 <input id="btn1" type="button" onclick="test();" /> function test() { alert("我是行间事件"); } 当点击id="btn1"时,触发onclick事件 2.onclick事件会在c...
2021-03-11js学习(补)-on,one ,off,自动触发事件,拷贝方法,多库共存
weixin_44767679的博客
03-13 135
问题: On给以给未来创建的元素绑定事件吗?传统绑定事件也可以实现吗? 解绑事件的方法? $(“p”).off(), $(“p”).off(“click”) $(“ul”).off(“click”,”li) 的功能区别? 只触发一次的事件是什么? 自动触发事件? $(“input”).trigger(“focus”)方法与 $(“div”).triggerHaddler(“click”)的区别 jQuery中事件对象 jQuery中 对象拷贝对象 jQuery多库共存 的解决问题 jQuery 插件常用的
JS实现显示部分文字点击显示全部
笑笑
09-16 1万+
js显示隐藏层 测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语
[js]绑定点击事件的三种方式
weixin_36210698的博客
02-18 1万+
绑定点击事件的三种方式 使用 onclick 属性(不推荐) &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-wi
JS----click3种方法
weixin_33971205的博客
09-28 190
js最常用的click事件3种方法 1、onclick=name() <!DOCTYPE html> <html leng="en"> <head> <meta charset="utf-8"> <title>one</title> </head>...
jQuery精要：选择器、事件绑定与Ajax
"jQuery笔记精要，涵盖了从基础到高级的各种jQuery知识点，包括API参考、选择器、事件绑定、动画效果和Ajax等，适合新手和有经验的开发者学习和复习使用。" jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值