今天在写界面时,希望对一些由JS代码动态添加的html标签进行事件绑定,使用了jquery 1.6+才提供的on函数。我的JQ版本是1.9.2。

以下这段代码是动态生成的。

1 <div class="container">
2     <!--动态生成部分-->
3     <p>
4           …………
5     </p>
6 </div>

我对<p>标签绑定了on函数,但是实际使用时却无法触发事件。

 

查看了官方文档,发现on有四个可选参数,分别是:events,[selector],[data],fn。每个参数的功能如下:

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

于是查阅了相关资料之后,发现selector这个函数用处非常大。

 

1 $("p").on('click', function(){
2 
3 //…………
4 
5 });

 

之前我是这样写的函数:

 

如果你的元素是动态添加的,那么你需要首先绑定一个静态的父元素,然后再使用selector来选择动态添加的元素。

代码修改如下:

1 $("。container").on('click', 'p',  function(){
2 
3 //…………
4 
5 });

至此,运行无误。

参考资料:http://mini.kisexu.com/post/2013-08-07/40053424637

posted on 2014-05-15 19:18  Iridescent'  阅读(249)  评论(0编辑  收藏  举报