jQueryon()绑定动态元素出现的问题小结_jquery

1、jquery on()绑定动态元素出现的问题 小结jquery on()方法是官方推荐的绑定事件的一个方法。使用on()方法可以给将 来动态创建的动态元素绑定指定的事件，例如append等。z前使用on的时候一直是$(). on(' click，,' function() ')z后发现有些时候一直无法绑定(比如元素动态生成时)，查看文档后发现正确 用法应该是$ (document). on(change，#pagesize_out，function() if($(#page_out)val()!=0)$ ("#pagesize"). val ($ (

2、this). val ();list();)同时，注意as this answers receives a lot of attcntion, here are two supplementary advises :1) when it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.that is, if you're adding an element of class b to am existing e1emen

3、t of id a, then don't use$ (document .body ).on ('click', ' b', function () but use$(' #a') on(' click， b', function () 2) be careful, when you add an element with an id, to ensure you，re not adding it twice. not only is it "illegal" in html to have two

4、e1ements with the same id but it breaks a lot of things. for example a selectorwould retrieve only one element with this id.on (events, selector, da ta,fn) events:一个或多个用空格分隔的事件类型和可选的命名空间，如cl ick或 "keydown. myplugin"。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果 选择器为null或省略，当它到达选定的元素，事件总是触发。data:

5、当一个事件被触发时要传递event, data给事件处理函数。fn:该事件被触发时执行的函数。false值也可以做一个函数的简写，返冋 false。替换bind()当第二个参数'selector'为null时，on()和bind()其实在用法上基本上没有任 何区别了，所以我们可以认为on()只是比bindo多了一个可选的selector参 数，所以on()可以非常方便的换掉bindo替换liveo在14之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以 后添加的元素上而，当然在1. 4 z后delegate()也可以做类似的事情了。liveo 的原理很简单，

6、它是通过document进行事件委派的，因此我们也可以使用on () 通过将事件绑定到document来达到liveo 样的效果。live。写法代码如下：$('#list li'). live('click', '#list li，, function() /function code here.)；on()写法代码如下：$ (docume nt). on('click', '#lis t li', fun cti on() /function code here.)；这里的关键就是第二个参数'selector&#

7、39;在起作用了。它是一个过滤器的作用，只 冇被选中元素的后代元素才会触发事件。替换 delegate () delegate 0是1. 4引入的，目的是通过祖先元素來代理委派后代元素的事件绑定 问题，某种程度上和1 ive()优点相似。只不过live()是通过document元素委派, 而delegate则可以是任意的祖先节点。使用on ()实现代理的写法和delegate () 基本一致。delegate ()的写法代码如下：$('#list') delegatefli', 'click', function () /function code he

8、re)；on()写法代码如下：$('#list') on('click'li', function() /function code herc.)；貌似第一个和第二个参数的顺序颠倒了一下，别的基本一样。总结jquery推出on ()的冃的有2个，一是为了统一接口，二是为了提高性能，所以 从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live() 了，因为它己经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件， 那接着用one()吧，这个没有变化。jquery on ()方法绑定动态元素废话不多说了，直接给

9、大家贴代码了。<div id二test"><div class二evt>evtl/div></div>错课的用法，卜面方法只为第一个class为cvt的div绑定了 click事件，使 用append动态创建的div则没有绑定<script>/先绑定事件再添加div$('#test evt') on('click', function() alert ($(this). text(); $ (' #tcst') append ('div class=，cvt/，>cvt2</div>，);</script>止确的用法如下：<script>$ ('body'). on ('cl ick', &