在JQ中,新增加的元素是不能运行事件处理函数的。一般来说,事件处理函数只绑定到在页面加载完毕前出现的元素标签,元素加载完毕后,我们再新增加元素标签,事件处理函数在新加的元素标签中就运行不了了。
我们来看一个简单的例子,在html页面中我们有“<button class='alert'>alert</button>”,我们为它添加一个事件处理函数,当鼠标点击这个按钮的时候,他就会显示一条消息。
当我们点击它的时候,它确实会显示一条信息"this is an alert message",但是,但我们添加一个新的按钮<button class="alert">,你将会发现,当我们点击新的按钮时,它是什么也不会发生的。这是因为点击事件在第二个按钮出来前,它就已经处理完毕。
事件在新建的的元素中是不运行的
我们可以从这个例子可以知道,事件在新建的按钮中是不起任何作用的。
解决这个问题。
他们html标签
<ul id="#list2">
<li class="special">special and new <button>I am new</button></li>
</ul>
按照下面的 方法我们就可以解决上面出现的问题了。
-
var $newLi = $ ( '<li class="special">special and new <button>I am new</button></li>' );
-
var $tgt = $ (event. target );
-
if ($tgt. is ( 'button' ) ) {
-
}
-
-
// next 2 lines show that you've clicked on the ul
-
$ ( this ). css ( {backgroundColor : bgc == '#ffcccc' || bgc == 'rgb(255, 204, 204)' ? '#ccccff' : '#ffcccc' } );
-
} );
-
} );
我的例子是从http://www.learningjquery.com/2008/03/working-with-events-part-1来的,也是从他那里翻译过来的。不过我只是说了大概,你们可以参考我的。原创毕竟是原创,只是我觉得看英文比较痛苦,所以就自己写了一篇,方便自己也方便他人。O(∩_∩)O~