1.下面的会有用到find,find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
2. 产生这种问题的原因是:是因为append中的节点是在整个文档加载后才添加的,页面并不会为未来的元素初始化添加点击事件,所以使用这种方式动态添加的节点中的点击事件没有生效。
例子我们要把 下面这段代码用append添加到div里面(这是要添加div里面的)
<dl class='list_dl'>
<dt class='list_dt' >
<span class='_after'></span>
<p>一级</p>
<i class='list_dt_icon'></i>
</dt>
<dd class='list_dd'>
<ul>
<li class='list_li'>123456</li>
<li class='list_li'>123456</li>
<li class='list_li'>123456</li>
</ul>
</dd>
</dl>
要添加的div
<div class="leftdiv1topdiv2" id="list_dlappdiv"></div>
这段代码对应的js代码
$(".list_dt").click(function(){
$('.list_dd').stop();
$(this).siblings("dt").removeAttr("id");
if ($(this).attr("id") == "open") {
$(this).removeAttr("id").siblings("dd").slideUp();
} else {
$(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
}
});
** 如果把要append添加的代码直接放在div里面,这段js代码就会起作用,但是要用append添加到里面就没有作用,,原因上面已经分析了 ,下面直接看操作吧
var str="<dl class='list_dl'>
<dt class='list_dt' >
<span class='_after'></span>
<p>一级</p>
<i class='list_dt_icon'></i>
</dt>
<dd class='list_dd'>
<ul>
<li class='list_li'>123456</li>
<li class='list_li'>123456</li>
<li class='list_li'>123456</li>
</ul>
</dd>
</dl>";
//先申明一个变量,用来存放 append添加的内容的,用$()把代码段抱起来
var row=$(str);
//把要添加的代码追加到div里面
$("#list_dlappdiv").append(row);
//把js代码放在find的对象后面,find上面有解释
$(row).find(".list_dt").click(function(){
$('.list_dd').stop();
$(this).siblings("dt").removeAttr("id");
if ($(this).attr("id") == "open") {
$(this).removeAttr("id").siblings("dd").slideUp();
} else {
$(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
}
});
这样的话在在试试效果的话,就还可以了,主要还是用的了 ,find方法;