以下Jquery事件代码中变量为什么会重复输出-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

以下Jquery事件代码中变量为什么会重复输出

2016-03-24 13:10:38 1506 2
<div id="search">
    <input type="text" placeholder="请输入关键字..." id="searchInput">
</div>
$("#search").on('focus', '#searchInput', function(event) {
    var _this = $(this);
    $("#searchInput").on('keydown', _this, function(e) {
        if(e.keyCode == 13) { //Enter键
            var keyword = $.trim(_this.val());
            console.log(keyword);
            //以下是ajax操作
            //.............
        }
    });
});

以上代码当鼠标先focus在input并输入文字然后input失去焦点一次后重新获得焦点,这时按下enter会输出两个keyword值,每次重复这样做数量都会+1,这时什么回事呢

取消 提交回答
全部回答(2)
  • 一生有你llx
    2019-07-17 19:12:38

    第二次focus的时候,#searchInput上被绑定上了第二个keydown的listener
    第N次focus就会绑上N个Keydown的listener

    虽然keydown之前似乎会发生focus,但这里其实完全不用关心focus嘛

    var $input = $("#searchInput").on('keydown', function(e) {

    if(e.keyCode == 13) { //Enter键
        var keyword = $.trim($input.val());
        console.log(keyword);
        //以下是ajax操作
        //.............
    }

    });

    0 0
  • 小旋风柴进
    2019-07-17 19:12:38

    第二次focus的时候,#searchInput上被绑定上了第二个keydown的listener
    第N次focus就会绑上N个Keydown的listener

    虽然keydown之前似乎会发生focus,但这里其实完全不用关心focus嘛

    var $input = $("#searchInput").on('keydown', function(e) {
        if(e.keyCode == 13) { //Enter键
            var keyword = $.trim($input.val());
            console.log(keyword);
            //以下是ajax操作
            //.............
        }
    });
    0 0
添加回答
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64399浏览量 回答数 11

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56990浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157683浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93762浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 147228浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146034浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85361浏览量 回答数 23

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305623浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80456浏览量 回答数 13

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67717浏览量 回答数 14
2736
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载