jq的event事件

 

在JQ中，新增加的元素是不能运行事件处理函数的。一般来说，事件处理函数只绑定到在页面加载完毕前出现的元素标签，元素加载完毕后，我们再新增加元素标签，事件处理函数在新加的元素标签中就运行不了了。

我们来看一个简单的例子，在html页面中我们有“<button class='alert'>alert</button>”,我们为它添加一个事件处理函数，当鼠标点击这个按钮的时候，他就会显示一条消息。

JavaScript:

1. $ (document ). ready ( function ( ) {
2.   $ ( 'button.alert' ). click ( function ( ) {
3.     alert ( 'this is an alert message' );
4.   } );
5. } );

当我们点击它的时候，它确实会显示一条信息"this is an alert message",但是，但我们添加一个新的按钮<button class="alert">，你将会发现，当我们点击新的按钮时，它是什么也不会发生的。这是因为点击事件在第二个按钮出来前，它就已经处理完毕。

事件在新建的的元素中是不运行的

PLAIN TEXT

JavaScript:

1. $ (document ). ready ( function ( ) {
2.   $ ( '#list1 li.special button' ). click ( function ( ) {
3.     var $newLi = $ ( '<li class="special">special and new <button>I am new</button></li>' );
4.     $ ( this ). parent ( ). after ($newLi );
5.   } );
6. } );

我们可以从这个例子可以知道，事件在新建的按钮中是不起任何作用的。

解决这个问题。

他们html标签

<ul id="#list2">

  <li class="special">special and new <button>I am new</button></li>

</ul>

按照下面的 方法我们就可以解决上面出现的问题了。

JavaScript:

1. $ (document ). ready ( function ( ) {  
2.   $ ( '#list2' ). click ( function (event ) {
3.     var $newLi = $ ( '<li class="special">special and new <button>I am new</button></li>' );
4.     var $tgt = $ (event. target );
5.     if ($tgt. is ( 'button' ) ) {
6.       $tgt. parent ( ). after ($newLi );
7.     }
8.  
9.     // next 2 lines show that you've clicked on the ul
10.     var bgc = $ ( this ). css ( 'backgroundColor' );
11.     $ ( this ). css ( {backgroundColor : bgc == '#ffcccc' || bgc == 'rgb(255, 204, 204)' ? '#ccccff' : '#ffcccc' } );
12.   } );
13. } );

我的例子是从http://www.learningjquery.com/2008/03/working-with-events-part-1来的，也是从他那里翻译过来的。不过我只是说了大概，你们可以参考我的。原创毕竟是原创，只是我觉得看英文比较痛苦，所以就自己写了一篇，方便自己也方便他人。O(∩_∩)O~