jQuery 绑定事件到动态创建的元素上的方法实例


Posted in Javascript onAugust 18, 2013

在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本。

很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法。

Okay,想法很简单,逻辑似乎也无错。具体我们来看一下现实到底能不能实现。

1.页面构造个表单,放上几个输入框。代码看起来是这样子的。

<form action="/" method="post">
        <table>
            <tr>
                <td>Name:</td>
                <td>
                    <input type="text" name="name" value=" " />
                </td>
            </tr>
            <tr>
                <td>Age:</td>
                <td>
                    <input type="number" name="age" value=" " />
                </td>
            </tr>
            <tr>
                <td>Tel.:</td>
                <td>
                    <input type="tel" name="tel" value=" " />
                </td>
            </tr>
            <tr>
                <td>E-mail:</td>
                <td>
                    <input type="email" name="email" value=" " />
                </td>
            </tr>
            <tr>
                <td>Birth:</td>
                <td>
                    <input type="datetime" name="birthday" value=" " />
                </td>
            </tr>
        </table>
    </form>

出来的界面在Chromium里差不多是这个样子的:
jQuery 绑定事件到动态创建的元素上的方法实例

2.然后开始写我们的JavaScript代码来实现单击选中框内的文本,根据之前的想法,实现起来差不多应该是下面这个样子:

<script type="text/javascript">
        $(function () {
            $("input").focus(function () {
                $(this).select();
            })
        })
  </script>

3.然后再去页面小试一下,看效果出来没有。尝试之后发现,差不多算是成功了一半。什么情况叫?如果此刻你也跟着写了代码,你会发现,间单击输入框时,框中文本会闪烁。再进一步才会发现,只有当鼠标按下不放,输入框内文本才是保持选中状态,是我们预期的。当松开时选择效果消失。无尽惆怅!
jQuery 绑定事件到动态创建的元素上的方法实例

而且这还只是仅仅在Chromium中的情况,在IE中更为奇葩,连一丁点选择的效果都没有绽放出来。直接把代码无视了。

jQuery 绑定事件到动态创建的元素上的方法实例

对于火狐,水壶(如果你还不知道它的存在的话:火狐近亲,Mozilla 官方承认的64位高效版本火狐变种版本)我已经无力去测了。

下面直接给出经过Google之后找到的能在全浏览器中工作的代码:

<script type="text/javascript">
        $(function () {
            $("input").focus(function () {
                var input = $(this);
                setTimeout(function () {
                    input.select();
                });
            })
        })
 </script>

而关于上面这段能够正常工作的代码,还有一点神奇之处。那就是我和大家可能都觉得
var input = $(this);
                setTimeout(function () {
                    input.select();
                });


                var input =$(this);
                setTimeout(function () {
                    $(this).select();
                });

这两种写法应该是完全一样的代码吧,所以后者也应该能够达到预期的效果才对。但事实上换成第二种后,效果不见了!根本无法让文本自动选中!!

这是一般人所无法理解的高度。

Okay,回归继续看我们的输入框现在怎么样了。现在只要输入框中有文本,随便点一下就自动选中且松开鼠标后不反弹。很好,要的就是这种效果。

 

下面,才是本文的真正主题,如何将特性,或者说事件处理器,绑定到动态创建的页面元素上。

接着上面这个功能讲。上面的代码也许解决了一个表单页面的需求,在且仅仅是在这个页面,输入框具备这种获得焦点后自动将文本选中的特性。或者说拥有我们代码中所绑定到输入框focus事件上的处理器,当然,这个处理器就是选择文本。

如果说上面的说法有点令人头晕找不到北,下面我将用平生最为直白的语言再次阐述同一观点:假如其他页面也有输入框,是不是每个页面都去写一段相同的代码来实现这样的效果。

或者说同样是在当前页面,当用户填完相应资料后,我们再动态生成一些输入框,而这些后来生成的输入框如何也拥有获得焦点选中文本的功能。

为了演示,我们检测如果用户输入了Name,我们再在下面创建一个输入框可以输入昵称。可以预见得到,这个后来通过JavaScript代码插入到DOM中的输入框其中不会有其他输入框一样的效果的。因为我们使文本自动被选中的代码是在页面加载时执行的,而页面加载时这个后来插入的输入框还不存在呢。

下面是新加的对name输入框监听的代码:

$("input[name='name']").change(function () {
                $("tr").first().append(' <tr>' +
                                          '<td>Nick name:</td>'+
                                           '<td>'+
                                                '<input type="text" name="nickname" value=" " />'+
                                           '</td>'+
                                        '</tr>')
            })

下面到页面去测试一下,在Name中随便输入点什么吧。并且测试生成的输入框是不能将文本自动选中的。

jQuery 绑定事件到动态创建的元素上的方法实例

下面给出使动态创建的元素得到之前绑定的事件处理器的方法:

$("body").on('focus', "input", function () {
                var input = $(this);
                setTimeout(function () {
                    input.select();
                });
            });

这个方法未免有点取巧,但也是我觉得目前为止所知道的比较好的办法。因为jQuery1.9之前其实是有个live()函数专门来做这样类似的工作的,它可以将事件处理器绑定到未来未还未被创建的元素身上,但后来随着jQuery版本的升级,不提倡用这个live()方法了。既然不提倡了,自然有它的理由我也就不细究了,就像之前我细究了一下jQuery为什么废除了检测浏览器相关的函数一样。

如果我们将上面的方法写到网站的母版页当中,那么就不必在每个有输入框的页面都写相同的代码来实现了,同时对于后来动态创建的元素也都应用上了效果。

上面关于输入框的例子只是为了演示,当然不局限于这个例子,这样处理动态创建元素的需求还是很常见的,至少我在项目中都遇到过几次了,在不同的情形下。比如在呈现给权限不够的用户的页面中,有些按扭需要禁用,但用户是可以点击添加来增加一行,而每行都会有删除修改按扭,这时候可以将disable应用到一个表格中新增加的行中的按扭上。

行到水穷处,坐看云起时

Javascript 相关文章推荐
jQuery 开天辟地入门篇一
Dec 09 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 #Javascript
JavaScript生成GUID的多种算法小结
Aug 18 #Javascript
实测jquery data()如何存值
Aug 18 #Javascript
js兼容的placeholder属性详解
Aug 18 #Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 #Javascript
jquery验证表单中的单选与多选实例
Aug 18 #Javascript
JS+CSS实现一个气泡提示框
Aug 18 #Javascript
You might like
php at(@)符号的用法简介
2009/07/11 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php单一接口的实现方法
2015/06/20 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
php简单的上传类分享
2016/05/15 PHP
php实现映射操作实例详解
2019/10/02 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
js中less常用的方法小结
2017/08/09 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python对csv文件追加写入列的方法
2019/08/01 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
国贸专业的职业规划书
2014/03/15 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
倡导文明标语
2014/06/16 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2015年新学期寄语
2015/02/26 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
工作后的感想
2015/08/07 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
springboot入门 之profile设置方式
2022/04/04 Java/Android