关于JQuery动态添加的html会失去动态效果——（消灭bug①）

问题描述：前端开发中常常会遇到JQ需要给当前部分动态创建、添加元素或者相应HTML代码的情况，我们会给当前部分设置click等事件达到动态效果或者功能实现，但是会发现动态添加的部分失去了相应事件效果。

原因：jquery 中在文档加载完成之后添加进去的的元素是不能直接绑定的,click等事件的注册，在页面加载时就已经完成了，而此时后添加的dom还没有创建完成，所以要用live方法绑定。

例如：（ps: append中的代码不必详看，只是为了说明用JQ中的append动态添加html这个创建方式）

$(".goodsCartBox_goodsAdd").click(function () {
var length = $(".goodsCartBox_goodsDetail .selected").length;
if(length==2){
$(".goodsCartList").append("<div class=\"goodsCartList_item\">\n" +
"            <div class=\"goodsCheck\">\n" +
"                <input type=\"checkbox\" class=\"goodsChecked\" checked>\n" +
"            </div>\n" +
"            <a class=\"goodsItem\">\n" +
"                <div class=\"goodsItem_img\">\n" +
"                    <img src=\"images/img_yxz/025f0b1f62805ddeb8773c6e050965a9ad.PNG\" alt=\"\">\n" +
"                </div>\n" +
"                <div class=\"goodsItem_info\">\n" +
"                    <div class=\"goodsItem_info_top\">\n" +
"                        <h3 class=\"info_name\">PUMA Clyde Moon Jungle NATUREL 低帮休闲鞋</h3>\n" +
"                        ×<span class=\"info_num\">1</span>\n" +
"                    </div>\n" +
"                    <div class=\"goodsItem_info_center\">\n" +
"                        颜色：<span class=\"info_color\">多色-小牛皮原色</span>\n" +
"                        尺码:<span class=\"info_size\">37码</span>\n" +
"                    </div>\n" +
"                    <div class=\"goodsCartList_num\">\n" +
"                        <span>数量</span>\n" +
"                        <form class=\"calculate_forms\" action=\"\">\n" +
"                            <span class=\"cartListCalculate subtract\">-</span>\n" +
"                            <input class=\"cartListNum\" type=\"text\" value=\"1\">\n" +
"                            <span class=\"cartListCalculate add\">+</span>\n" +
"                        </form>\n" +
"                    </div>\n" +
"                    <div class=\"goodsItem_info_bottom\">￥<span class=\"info_price\">839</span></div>\n" +
"                </div>\n" +
"\n" +
"            </a>\n" +
"        </div>");
}
});

原本append的这个部分是有设置click事件的，如下

$(".cartListCalculate.subtract").click（function () {
var n = $(this).siblings(".cartListNum").val();
n--;
if(n<1){
$(this).siblings(".cartListNum").val(1);
}else{
$(this).siblings(".cartListNum").val(n);
}
}）；

此时，发现对应click效果失效，经过测试，这个click事件并没有在新添加的元素上执行。

解决方案：现在，将事件利用live绑定就OK了，如下：

$(".cartListCalculate.subtract").live("click",function () {
var n = $(this).siblings(".cartListNum").val();
n--;
if(n<1){
$(this).siblings(".cartListNum").val(1);
}else{
$(this).siblings(".cartListNum").val(n);
}
}）；

此时，事件生效！·~~~~