jQuery-append添加元素click无效

很久没有使用jQuery，做项目的时候遇到一个小问题就是网页加载之后的append的元素是可以执行click事件，网页加载完成之后的，再次append的元素不执行click事件,简单的通过ul模拟一下:

1

2

3

<code>&lt;ul </code><code>class</code><code>=</code><code>"content"</code><code>&gt;</code>

<code>&lt;/ul&gt;</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"test"</code><code>&gt;测试&lt;/span&gt;</code>

三种不同的点击方式，append之后的click无效，通过on执行，注意参数：

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<code>$(</code><code>function</code><code>() {</code>

<code>      </code><code>$(</code><code>'.content'</code><code>).append(</code><code>'&lt;li&gt;FlyElephant&lt;/li&gt;'</code><code>);</code>

<code>      </code><code>$(</code><code>'.content li'</code><code>).click(</code><code>function</code><code>(event) {</code>

<code>          </code><code>console.log(</code><code>'博客园-FlyElephant'</code><code>);</code>

<code>      </code><code>});</code>

<code>      </code><code>$(</code><code>'.content li'</code><code>).on(</code><code>'click'</code><code>, </code><code>function</code><code>() {</code>

<code>      </code><code>/*通用*/</code>

<code>      </code><code>$(document).on(</code><code>'click'</code><code>, </code><code>'.content li'</code><code>, </code><code>function</code><code>() {</code>

<code>          </code><code>console.log(</code><code>'keso'</code><code>);</code>

<code>      </code><code>$(</code><code>'.test'</code><code>).click(</code><code>function</code><code>() {</code>

<code>          </code><code>$(</code><code>'.content'</code><code>).append(</code><code>'&lt;li&gt;keso&lt;/li&gt;'</code><code>);</code>

<code>  </code><code>});</code>

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4975980.html，如需转载请自行联系原作者