[SOLUCIONADO] La funcion se activa con el segundo clic

[WArriola]

Hola, tengo un problema con una funcion que se activa cuando hago clic dos veces, y no se como hacer para que se active con el primer clic.

En un archivo php tengo el siguiente codigo:

Código HTML:

<input type="button" onclick="mostrar();" value="Nuevo" class="button button1" data-type="zoomin" /> 

La funcion mostrar es la siguiente:

Código:

function mostrar(){
		$('.button1').click(function() {
			type = $(this).attr('data-type');
			$('.overlay1').fadeIn(function(){window.setTimeout(function(){$('.form1.'+type).addClass('window-container-visible');}, 100);});
		});
}

Lo que haces es simplemente hacer visible una div que contiene un formulario, simple.

El problema es que al hacer clic al boton, no hace nada, al hacer clic por segunda vez si abre el formulario y ya luego funciona normal.

Por lo que he visto debo incluir ese codigo en una función: $(document).ready(function()

Lo he intentado pero el resultado es peor ya que luego no me funciona nada. Es que el archivo js que incluyo en php, donde se encuentra la funcion mostrar(), tambièn tiene otras funciones, entonces no se como poner: $(document).ready(function(){; y que además no tenga conflicto con las otras funciones.

Espero se entienda, si alguein me puede tirar un salvavida le estaré agradecido

[Maganius]

Código Javascript:

function mostrar(){
 
            type = $(this).attr('data-type');
            $('.overlay1').fadeIn(function(){window.setTimeout(function(){$('.form1.'+type).addClass('window-container-visible');}, 100);});
 
}
 

[WArriola]

Gracias por la pronta respuesta Maganius, si bien tu ejemplo no me sirve, pq en realidad son 4 formularios los que se encuentran en esa función, error mío al no aclararlo; pero de todas formas de ayudó a darme cuenta cual era el error que cometía y ahora lo pude solucionar gracias a tu pista: yo la funcion antes la tení así:

Código:

		function mostrar(){
			$('.button1').click(function() {
				type = $(this).attr('data-type');
				$('.overlay1').fadeIn(function(){window.setTimeout(function(){$('.form1.'+type).addClass('window-container-visible');}, 100);});
			});
			$('.button2').click(function() {
				type = $(this).attr('data-type');
				$('.overlay2').fadeIn(function(){window.setTimeout(function(){$('.form2.'+type).addClass('window-container-visible');}, 100);});
			});
			$('.button3').click(function() {
				type = $(this).attr('data-type');
				$('.overlay3').fadeIn(function(){window.setTimeout(function(){$('.form3.'+type).addClass('window-container-visible');}, 100);});
			});
			$('.button4').click(function() {
				type = $(this).attr('data-type');
				$('.overlay4').fadeIn(function(){window.setTimeout(function(){$('.form4.'+type).addClass('window-container-visible');}, 100);});
			});
		}

Ahora basándome en tu guía la dejá así:

Código:

function mostrar1(){
	type = $(this).attr('data-type');
	$('.overlay1').fadeIn(function(){window.setTimeout(function(){$('.form1.'+type).addClass('window-container-visible');}, 100);});
}
function mostrar2(){
	type = $(this).attr('data-type');
	$('.overlay2').fadeIn(function(){window.setTimeout(function(){$('.form2.'+type).addClass('window-container-visible');}, 100);});
}
function mostrar3(){
	type = $(this).attr('data-type');
	$('.overlay3').fadeIn(function(){window.setTimeout(function(){$('.form3.'+type).addClass('window-container-visible');}, 100);});
}
function mostrar4(){
	type = $(this).attr('data-type');
	$('.overlay4').fadeIn(function(){window.setTimeout(function(){$('.form4.'+type).addClass('window-container-visible');}, 100);});
}

Y el llamado a la función también lo modifique quedándos así:

Código HTML:

 <input type="button" onclick="mostrar1();" value="Nuevo" class="button button1" data-type="zoomin" /> - 
				<input type="button" onclick="mostrar2();" value="Eliminar" class="button button2" data-type="zoomin" /> - 
				<input type="button" onclick="mostrar3();" value="Modificar" class="button button3" data-type="zoomin" /> - 
				<input type="button" onclick="mostrar4();" value="Buscar" class="button button4" data-type="zoomin" /> 

Y ahora si me funciona perfectamente.

Es que yo querpía colocar todo el codigo en una úinica función, pero ahora me doy cuenta que colocaba funciones dentro de una función, y por eso debía hacer dos veces clic.

Gracias por la ayuda que me abrió los ojos

[Maganius]

Como que no te sirve mi ejemplo si es TU ejemplo? yo lo unico que hice fue quitarle el segundo evento click que tenias; por eso debias hacer doble click.

[Alexis88]

No hay necesidad de que le asignes el atributo onclick al botón, con que en el archivo JS coloques $('.button1').click(function(){...}) es suficiente para que hagas uso del evento click.

Saludos

[WArriola]

Maganius quizas me explique mal, tu comentario me ayudò a ver cual era mi error y pq debìa hacer doble clic, con ello corregì el código y ahora me funciona perfectamente, gracias!

Alexis88 probé quitar el evento onclic y saca la funcion Mostrame dejando en el JS solo $('.button1').click(function(){...}) ; pero por alguna razon no funciona, sin embargo como explique en mi respuesta anteriro qsì quedò funcionando y bueno eso es lo importante.

No se nada de jquery, aprendo a los golpes con tutoriales que encuentro; y el archivo php que contiene los formulario lo traigo mediante una funcion jquery y lo coloco en una div de un index.php, que ya tiene la js incluida, seguro algo de todo eso da conflicto, pero lo importante es que ya funciona juas; entonces volví a dejar el código como puse en mi comentario anterior, desde ta gracias a los dos por el tiempo y por responder tan rapido ^^''