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的日期选择控件
Oct 27 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
解析Python中while true的使用
2015/10/13 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python操作MySQL数据库的方法
2018/06/20 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
医院辞职信范文
2014/01/17 职场文书
简历中的自我评价范文
2014/02/05 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python