[SOLUCIONADO] comprobar elemento antes de crearlo

iimeh · #1 (**permalink**) 20/05/2013, 16:57

Hola a todos soy nuevo en esto de JQuery y estoy tratando de haer un script con el cual cuando de click en un link me agregue un tag con la posibilidad de borrarlo desde una "x" hasta aqui todo hiba perfecto. Pero entonces me di cuenta que podia volverce a agragar el mismo tag si daba click de nuevo para lo cual intente usar length para comprobar si ya habia sido agregado el tag pero no funciona.

Alguien me podria apoyar???? anexo el codigo

Código:

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <link rel="stylesheet" href="css/jquery.tagbox.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script type="text/javascript">
$(function() {
        var scntDiv = $('#p_scents');
        
        $('.addScnt').on('click', function() {
				var c = $(this).attr('cita');
				var d = $(this).attr('id');

					if(!$('#'+d).length){
						$('<label class="Ctags" id="'+d+'"><input type="hidden" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />'+c+' <a href="#" id="remScnt">X</a></label>').appendTo(scntDiv);
					return false;

					}
        });
        
        $(document).on('click', '#remScnt', function() { 
						var a = $(this).attr('id');
                        $(this).parents('label').remove();
                return false;
        });
});

  </script>
  <style type="text/css">
 div{
        padding:8px;
    }
  </style>
</head>
<body>
<a href="#" class="addScnt" id="1" cita="romanos 8:10">Add Another Input Box</a>, 
<a href="#" class="addScnt" id="2" cita="romanos 8:11">Add Another Input Box</a>, 
<a href="#" class="addScnt" id="3" cita="romanos 8:12">Add Another Input Box</a>, 
<a href="#" class="addScnt" id="4" cita="romanos 8:13">Add Another Input Box</a>, 
<a href="#" class="addScnt" id="8" cita="romanos 8:14">Add Another Input Box</a>, 

<div id="p_scents">
</div>
</body>
</html>

fhederico · #2 (**permalink**) 20/05/2013, 18:40

Hola,

Cuando haces esto:

Código:

var c = $(this).attr('cita');
var d = $(this).attr('id');

Si existe ese atributo, se guarda en las variables "c o d" respectivamente, si les haces un alert podras ver que te traen, y segun el valor que tengan deberias trabajar, es decir, si viene algo en esas variables es porque existe o no el atributo y luego deberias condicionar, por ejemplo

Código:

if (typeof(d) == "undefined")
{
   alert("hola, no estoy definido");
}
else
{
  alert("hola, tengo datos y son: "+d);
}

Lo unico que estamos diciendo ahi, es que si el contenido de "d" es de tipo indefinido, entonces muestra un alert.

Saludos

iimeh · #3 (**permalink**) 21/05/2013, 16:16

gracias fhederico lo eh resuelto con .find() determino el id que quiero y con length >0 corroboro que no este vació, si esta vació me lo crea y si no esta vació quiere decir que ya existía un campo previo...

el error era que no estaba definiendo bien lo que deba buscar jQuery

gracias amigo...

dejo el código para que lo vean

Código:

 <script type="text/javascript">
$(function() {
        var scntDiv = $('#p_scents');
        
        $('.addScnt').on('click', function() {
				var c = $(this).attr('cita');
				var d = $(this).attr('id');
				
if($('#p_scents').find('[id='+d+']').length >0) {
 		alert('Este campo ya se encuentra .');
 }else{
				$('<label class="Ctags" id="'+d+'"><input type="hidden" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />'+c+'<a href="#" id="remScnt">X</a></label>').appendTo(scntDiv);
				
					return false;
 }
        });
        
     	$(document).on('click', '#remScnt', function() { 
						var a = $(this).attr('id');
                        $(this).parents('label').remove();
                return false;
        });
});

  </script>