今天在写界面时,希望对一些由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