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

在进入主题之前，我们先来看看前台页面中经常用到的一个功能：点击页面时自动选择输入框中的文本。很容易想到使用输入框的焦点事件，然后在输入框获得焦点时调用jQuery的select()方法。好吧，想法很简单，逻辑似乎是对的。让我们具体看看现实能否实现。1.在页面上构建一个表单，并放置几个输入框。代码是这样的。复制代码的代码如下： form action='/' method=' post ' table tr TD name 3360/TD TD输入类型=' text ' name=' name ' value=' '//TD/tr TD age 3360/TD TD输入类型=' number ' name=' age ' value=' '//TD/tr/tr tdtel ./TD TD TD输入类型=' tel ' name=' tel ' value=' '//TD/tr tdE-mail :/Td输入类型='

2.然后，我们开始编写JavaScript代码来单击所选框中的文本。按照之前的思路，应该差不多是这样的：复制代码的代码如下： Script Type=' text/JavaScript ' $(function(){ $(' input '))。Focus(函数(){$ (this))。select()；}) }) /script3。然后去页面试试看效果出来没有。试了试，发现差不多成功了一半。是什么情况？如果你此刻写代码，你会发现当你点击输入框时，框中的文字会闪烁。进一步，我们会发现，只有按下鼠标时，输入框中的文本才会保持选中状态，这也是我们所期望的。释放时，选择效果消失。无尽的忧郁！

而且在Chromium中也只是这样，在IE中就更精彩了，连一点选择的效果都没有开花。直接忽略代码。

对于火狐，水壶(如果你不知道它的存在：火狐的近亲，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()；});复制代码如下： vari input=$(this)；setTimeout(函数(){ $(this))。select()；});这两种编写方法应该是完全相同的代码，所以后者也应该能够达到预期的效果。但其实切换到第二个之后，效果就没了！不可能让文字自动选中！这是大多数人无法理解的高度。好了，回去看看我们的输入框现在怎么样了。现在只要输入框里有文字，只要点一下，就会自动选中，松开鼠标后不会反弹。很好，这就是你想要的。以下是本文的真正主题，如何将特性或事件处理程序绑定到动态创建的页面元素。我们先来说说上面这个函数。上面的代码可能解决了一个表单页面的需求，只有在这个页面上，输入框有获得焦点后自动选择文本的功能。或者让处理器绑定到我们代码中的输入框焦点事件。当然，这个处理器是用来选择文本的。如果上面的说法有点晕，找不到北，那我就用我这辈子最直白的语言再解释一遍同一点：如果其他页面也有输入框，是不是每个页面都要写同样的代码才能达到这个效果？或者也可以在当前页面上，用户填写相应的材料后，我们会动态生成一些输入框，这些以后生成的输入框也有获取选中文本焦点的功能。为了演示，我们检查如果用户输入名称，我们将在下面创建一个输入框来输入昵称。可以预见，这个用JavaScript代码插入到DOM中的输入框，不会有和其他输入框一样的效果。因为自动选择文本的代码是在加载页面时执行的，而加载页面时后面插入的输入框不存在。以下是新增加的监控名称输入框的代码：复制的代码如下： $ ('input [name=' name']')。change (function () {$ ('tr '))。第一个()。追加(' tr昵称3360/。Td'' TD ' '输入类型=' text ' Name=' nickname ' value=' '/' '/TD ' '/tr ')})让我们转到页面进行测试。在名称中输入一些内容。并且测试生成的输入框无法自动选择文本。

给出了以下方法来使动态创建的元素获得以前绑定的事件处理程序：按如下方式复制代码： $(“body”)。on ('focus '，' input '，function(){ var input=$(this)；setTimeout(function(){ input . select()；});});这种方法有点棘手，但也是目前为止我知道的比较好的一种。在jQuery1.9之前，实际上有一个live()函数专门用于类似的工作，它可以将事件处理程序绑定到未来尚未创建的元素。但是随着jQuery版本的升级，这种live()方法并没有被提倡。既然不提倡，自然是有原因的，所以我就不仔细研究了，就像我之前研究为什么jQuery取消了与检测浏览器相关的功能一样。如果把上面的方法写入网站的母版页，就不用在每一个有输入框的页面上写同样的代码，同时也将效果应用到后面动态创建的元素上。上面这个输入框的例子只是为了演示，但肯定不局限于这个例子，所以处理动态创建元素的需求是很常见的，至少我在项目中遇到过几次，在不同的情况下。例如，在向权限不足的用户呈现的页面中，有些按钮需要禁用，但用户可以单击“添加”来添加一行，每一行都将有一个删除和修改按钮。此时，禁用可以应用于表格中新添加的行中的按钮。我会一直走，直到水挡住我的路，然后坐下来，看着升起的云。