JQuery - funcion remove() con DIV no funciona si el elemento se ha añadido desde jquery

   
Vista:

funcion remove() con DIV no funciona si el elemento se ha añadido desde jquery

Publicado por zenit (3 intervenciones) el 20/03/2016 01:22:09
Buenas...

A ver si me podeis ayudar pq el tema me esta volviendo loco.. resulta q tengo el siguiente codigo..


HTML ----------

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="panel-body" id="pannel-words">
 
	<div class="row">
		<div class="col-md-4 col-md-offset-2"><input class='form-control' type="text" value="Perro"></div><span class="glyphicon glyphicon-remove remove"></span>
		<div class="col-md-4"><input class='form-control' type="text" id="2"  value="Dog"></div>
	</div>
	<div class="row">
		<div class="col-md-4 col-md-offset-2"><input class='form-control' type="text" value="Vaca"></div><span class="glyphicon glyphicon-remove remove"></span>
		<div class="col-md-4"><input class='form-control' type="text" id="3" value="Cow"></div>
	</div>
	<div class="row">
		<div class="col-md-4 col-md-offset-2"><input class='form-control' type="text" value="Caballo"></div><span class="glyphicon glyphicon-remove remove"></span>
		<div class="col-md-4"><input class='form-control' type="text" id="4" value="Horse"></div>
	</div>
</div>
<div class="panel-footer">
	<div class="row">
		<div class="col-md-4 col-md-offset-2"><input id="spanish" class='form-control' type="text" value=""></div>
		<div class="col-md-4"><input id="english" class='form-control' type="text" value=""></div>
	</div>
	<div class="row margin-top">
		<div class="col-md-3 col-md-offset-3">
			<button type="button" id="btn-add" class="btn btn-success btn-sm btn-block">
			<span class="glyphicon glyphicon-plus"></span> Add Word
			</button>
		</div>
		<div class="col-md-3">
			<button type="button" id="btn-save" class="btn btn-info btn-sm btn-block">
			<span class="glyphicon glyphicon-floppy-disk"></span> Save List
			</button>
		</div>
	</div>




JQUERY ---------

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
 
	$(".remove").click(function(){
		$(this).parent().remove();
	}) ;
		$('.remove').click(function() {
 
		$(this).parent('.remove').remove();
	});
	$("#btn-add").click(function(){
 
		$("#pannel-words").append( "<div class='row'><div class='col-md-4 col-md-offset-2'><input class='form-control' type='text' value='" + $("#spanish").val() + "'></div><span class='glyphicon glyphicon-remove remove'></span><div class='col-md-4'><input class='form-control' type='text' value='" + $("#english").val() + "'></div></div>");
		$("#spanish").val("");
		$("#english").val("");
	}) ;
</script>

PROBLEMA ----

Como podeis comprobar es un panel donde tengo ya insertado varios campos. la funcion añadir me funciona correctamente y la de borrar tb excepto para aquells campos que son añadidos. ¿se os ocurre que esta pasando?

Un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

funcion remove() con DIV

Publicado por zenit (3 intervenciones) el 20/03/2016 02:35:50
Ok. me he encontrado con esto

http://websistent.com/dynamic-textbox-jquery-php/

segun dice hay q hacerlo con la funcion 'on' en vez de 'click' ya que la insercion es dinamica. Esto ya me lo imagiba y probe antes de postear con la opcion 'on' asi que revisare el codigo y vere q me sucedido.

un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

funcion remove() con DIV no funciona si el elemento se ha añadido desde jquery

Publicado por xve (557 intervenciones) el 20/03/2016 10:05:19
Hola Zenit, el problema, es que javascript, una vez añade las funciones, lo hace para el contenido actual de la web, si se añade posteriormente un contenido con javascript, esa contenido no es visto por las funciones anteriormente añadidas.

no se si me he explicado bien...

Hay una solución mejor, pero no la recuerdo... una manera muy simple, es recargar las funciones una vez añades contenido a la web... algo así:
1
2
3
4
5
6
7
8
$("#btn-add").click(function(){
	$("#pannel-words").append( "<div class='row'><div class='col-md-4 col-md-offset-2'><input class='form-control' type='text' value='" + $("#spanish").val() + "'></div><span class='glyphicon glyphicon-remove remove'></span><div class='col-md-4'><input class='form-control' type='text' value='" + $("#english").val() + "'></div></div>");
	$(".remove").unbind("click").click(function(){
		$(this).parent().remove();
	});
	$("#spanish").val("");
	$("#english").val("");
})

Lo que hacemos, es desactivar el click anterior (unbind) y posteriormente volvemos a activar el evento click para todo el contenido actual, que ya contiene la nueva linea.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

funcion remove() con DIV no funciona si el elemento se ha añadido desde jquery

Publicado por zenit (3 intervenciones) el 21/03/2016 14:39:53
Interesante xve

Probare ambas.

Muchas gracias por la aportacion.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar