how to delete element created with jquery?
i开发者_开发知识库 have write this block of code in jquery to create three element after some events
$('body').append(
tmp= $('<div id="tmp"></div>')
);
$('<div id="close" />').appendTo("#tmp");
$('<div id="box-results" />').appendTo('#tmp');
this three elements are created normally and added to my DOM but i want to remove them with some function like this :
$("#close").click(function(e){
e.preventDefault();
$("#tmp").remove();
//$("#overlay").remove();
});
and after i click close div noting happen ! what's wrong with my code ?
here is online example : mymagazine.ir/index.php/main/detail/36 - please find " here is jquery issue" sentence in site because site language is Persian
you need to add the click handler on #close after you insert the element into the document.
edit providing the requested demo; tested in 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>
edit
change your plugin's code from
$.ajax({
...
success: function ()
{
$('<div id="close"/>').appendTo($('#tmp'));
}
});
$('#close').click(function (e) ...);
to
$.ajax({
...
success: function ()
{
$('<div id="close"/>')
.click(function (e) ...)
.appendTo($('#tmp'))
;
}
});
Because the elements with ids #tmp and #close are created dynamically, you can't use the click on them directly, you need the live() method instead:
$("#close").live('click', function(e){
$("#tmp").remove();
return false;
});
Live() Description:
Attach a handler to the event for all elements which match the current selector, now or in the future.
As can be seen your element is created dynamically (future) not when page was loaded.
More Info Here
You should use the live method instead of click. It will allow you to add/remove elements without changing their behaviour
$("element").live("click", function() { /*do things*/ });
加载中,请稍侯......
精彩评论