jquery无法获取动态添加内容问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-08-11 13:50:59　-　阅:　-　评:0　-　积分:0

之前在做淘宝店铺装修代码生成器时遇到一些问题，例如：我有一个添加与删除的功能，添加后点击时还可以进行传值，截图如下：
。就这个小功能，我是改了再改，用过很多方法，包括接下来讲到的几种方法。先来模拟下这个事件吧，附一段源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery无法获取动态添加内容的值问题--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="jquery无法获取动态元素的值,jquery无法取值,jquery动态添加,live(),clone()">
<style type="text/css">
*{margin:0;padding:0}
.wrap{border:1px dashed #999; width:1000px; margin:0 auto}
p{background-color:#ccc; margin-bottom:10px;}
input[type="button"]{margin:0 auto;display:block;}
</style>
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('.wrap p').click(function(){
alert($(this).text());/*弹出本身内容*/
});
$('input[type="button"]').click(function(){
$('.wrap').append('<p>我不是亲生的，哇哇哇~~~</p>');  /*点击按钮时向页面插入内容*/
});
})
</script>
</head>
<body>
<div class="wrap">
<p>我是亲生的，萌萌哒</p>
</div>
<input type="button" value="新增" />
</body>
</html>

点击上面的“运行代码”可以查看效果，简单说下功能：点击新增时，会自动向“wrap”中添加一个“p”，点击“p”时会弹出“p”的文本内容。通过点击我们可以发现，当点击那个内容是“我不是亲生的”p时并没有弹窗，而上面一个是可以弹窗的。这里可能会有很多亲感到迷惑，代码没有写错啊。确实是没有写错，但后面那个“p”是通过点击后新增的而并非是原页面内容。

那么怎么解决呢？手册中有属性“live”，简述：.live() 方法能对一个还没有添加进DOM的元素有效。下面来修改上面这段源码的第17行：

$('.wrap p').live('click',function(){

虽然仅将“p”的“click()”方法替换成了“live”方法，但功能却是实现了，这时我们再点击p时就可以弹出其文本内容了。怎么样，是不是感觉“live”的功能很强大？但这个也不能滥用哦！下面再来说另一种方法。

这个也是我现在所使用的，就是“clone()”，专业术语是：克隆，可以理解为复制功能，下面再来修改上面这段源码：

$('.wrap p').click(function(){
alert($(this).text());
});
$('input[type="button"]').click(function(){
$('.wrap p').eq(0).clone(true).appendTo('.wrap').text("我不是亲生的，哇哇哇~~~");
});

现在再点击都可以弹出本身的内容了，来放一张修改好的效果图：

值得注意的是“clone()”中的值为“true”时才能弹！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2014-08-11/188.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！