关于用append()插入代码后对应的js无效问题完美解决

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方法；