2010-06-11 19 views
5

TENGO escribir este bloque de código en jQuery para crear tres elementos después de algunos eventoscómo eliminar el elemento creado con jquery?

$('body').append(
tmp= $('<div id="tmp"></div>') 
); 

$('<div id="close" />').appendTo("#tmp"); 
$('<div id="box-results" />').appendTo('#tmp'); 

estos tres elementos se crean normalmente y se añade a mi DOM pero quiero eliminarlos con alguna función como esta:

$("#close").click(function(e){ 

e.preventDefault(); 
$("#tmp").remove(); 
//$("#overlay").remove(); 
}); 

y después de hacer clic en cerrar div, notará que sucede! ¿Qué pasa con mi código?

aquí es ejemplo en línea: mymagazine.ir/index.php/main/detail/36 - por favor, encontrar "aquí es jQuery tema" condena en el sitio porque el lenguaje sitio es persa

Respuesta

11

es necesario agregar el controlador de clic en #Cerrar después de insertar el elemento en el documento.

edit proporcionando la demostración solicitada; probado en 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> 

edición

cambio de código de su plug-in de

$.ajax({ 
    ... 
    success: function() 
    { 
     $('<div id="close"/>').appendTo($('#tmp')); 
    } 
}); 
$('#close').click(function (e) ...); 

a

$.ajax({ 
    ... 
    success: function() 
    { 
     $('<div id="close"/>') 
      .click(function (e) ...) 
      .appendTo($('#tmp')) 
     ; 
    } 
}); 
+0

¿Me podría mostrar algo de código? te refieres a $ ("# close"). live ('click', function() {}); si quieres decir que tampoco funciona. – mehdi

+0

no está funcionando. esto lo pruebas? Te funciona ?! – mehdi

+0

@mehdi: Su respuesta funciona perfectamente para mí: http://bit.ly/aKEvbh – Matt

2

Debe utilizar el método directo en lugar de clic. Se le permitirá añadir/quitar elementos sin cambiar su comportamiento

$("element").live("click", function() { /*do things*/ }); 
3

Debido a que los elementos con los identificadores de #tmp y se crean dinámicamente, no se puede utilizar el click directamente de ellos, es necesario el método live() en su lugar:

$("#close").live('click', function(e){  
    $("#tmp").remove(); 
    return false; 
}); 

Live() Descripción:

Adjunte un controlador al evento para todos los elementos que coincidan con el selector actual, ahora o en el futuro.

Como se puede ver, su elemento se crea dinámicamente (futuro) no cuando se cargó la página.

More Info Here

+0

en vivo se depreció – Rahul

Cuestiones relacionadas