我已经在jquery中编写了这段代码,以便在一些事件之后创建三个元素
$('body').append(
tmp= $('<div id="tmp"></div>')
);
$('<div id="close" />').appendTo("#tmp");
$('<div id="box-results" />').appendTo('#tmp');
这三个元素是正常创建的并添加到我的DOM中但我想用这样的函数删除它们:
$("#close").click(function(e){
e.preventDefault();
$("#tmp").remove();
//$("#overlay").remove();
});
然后我点击关闭div注意发生!我的代码出了什么问题?
这里是在线示例:mymagazine.ir/index.php/main/detail/36 - 请在网站上找到“这里是jquery问题”句子,因为网站语言是波斯语
答案 0 :(得分:11)
在中将元素插入文档后,您需要在#close 上添加点击处理程序。
编辑提供所要求的演示;在ff36中测试:
<html>
<head>
<title>whatever</title>
<style type="text/css">
div {
border: 1px solid black;
padding: 0.3em;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('body').append($('<div id="tmp"/>'));
$('<div id="close">click me</div>').appendTo("#tmp");
$('<div id="box-results">contents</div>').appendTo('#tmp');
$('#close').bind('click', function ()
{
$('#tmp').remove();
return false;
});
});
</script>
</head>
<body>
</body>
</html>
修改强>
从
更改插件的代码$.ajax({
...
success: function ()
{
$('<div id="close"/>').appendTo($('#tmp'));
}
});
$('#close').click(function (e) ...);
到
$.ajax({
...
success: function ()
{
$('<div id="close"/>')
.click(function (e) ...)
.appendTo($('#tmp'))
;
}
});
答案 1 :(得分:3)
由于具有ids #tmp
和#close
的元素是动态创建的,因此您无法直接使用click
,您需要 live()
< / strong>方法改为:
$("#close").live('click', function(e){
$("#tmp").remove();
return false;
});
Live()
说明:
为所有人附加一个处理程序 与当前相匹配的元素 选择器,现在或将来。
可以看出,您的元素是动态创建的(未来),而不是在加载页面时。
<强> More Info Here 强>
答案 2 :(得分:2)
您应该使用实时方法而不是单击。它允许您添加/删除元素而不改变其行为
$("element").live("click", function() { /*do things*/ });