js添加删除内容的有关问题．
日期：2014-05-16 浏览次数：20340 次
js添加删除内容的问题．
<body>
<input type="button" class="add" value="添加">
<script>
$(document).ready(function(){
$(".add").click(function(){
$("body").append("<div class=\"Tab_main_n\" style=\"width:100px;height:100px;border:1px solid #ccc\"><input type=\"button\" class=\"del\" value=\"删除\"></div>");
})
$(".del").click(function(){
$(this).parent(".Tab_main_n").remove();
})
})
</script>
</body>
添加后要怎么删除呢？怎么写才是对的．
------解决方案--------------------
原代码问题在于 用click进行绑定的时候 .del按钮还不存在，所以绑定无效。
改用on来绑定后，不论元素当前是否存在，绑定都有效。
click和on的绑定原理不一样，一个是直接绑定，一个是采用冒泡机制。
详情可以自行谷歌jquery的on方法。
------解决方案--------------------
我感觉问题出在这里
因为你.del这个对象是动态创建的，所以针对动态创建的对象绑定事件时要用live方法
<body>
<input type="button" class="add" value="添加">
<script>
$(document).ready(function(){
$(".add").click(function(){
$("body").append("<div class=\"Tab_main_n\" style=\"width:100px;height:100px;border:1px solid #ccc\"><input type=\"button\" class=\"del\" value=\"删除\"></div>");
})
$(".del").click(function(){
$(this).parent(".Tab_main_n").remove();
})
})
</script>
</body>
添加后要怎么删除呢？怎么写才是对的．
------解决方案--------------------
原代码：
$(".del").click(function(){
$(this).parent(".Tab_main_n").remove();
})
修改为：
$("body").on('click','.del',function(){
$(this).parent(".Tab_main_n").remove();
})
原代码问题在于 用click进行绑定的时候 .del按钮还不存在，所以绑定无效。
改用on来绑定后，不论元素当前是否存在，绑定都有效。
click和on的绑定原理不一样，一个是直接绑定，一个是采用冒泡机制。
详情可以自行谷歌jquery的on方法。
------解决方案--------------------
我感觉问题出在这里
$(".del").click(function(){
$(this).parent(".Tab_main_n").remove();
})因为你.del这个对象是动态创建的，所以针对动态创建的对象绑定事件时要用live方法
$(".del").live('click',
function()
{
$(this).parent(".Tab_main_n").remove();
}
)
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
