Al utilizar axaj se me resetean los elementos creados en javascript (Dom)

[alejandromoneo13]

Hola muy buenas, necesito ayuda.

He creado un formulario mediante javascript DOM (todo con createElement y appendChild) Ejemplo:

Código:

		
var div3 = document.createElement("div");
var label3 = document.createElement("label");
addText(label3, "Correo eléctronico:");
var input3 = document.createElement("input");
input3.setAttribute("type", "text");
input3.setAttribute("name", "email");
input3.setAttribute("id", "inputemail");
input3.setAttribute("maxlength", "70");	
			
div3.appendChild(label3);
div3.appendChild(input3);

Hasta aqui todo bien, luego tengo un botón que al accionarlo llama a un jquery que valida los campos y si estos estan bien mediante ajax incluye un php. Y envia el mensaje.

JQUERY

Código:

$(document).ready(function(){
	$(".boton_envio").click(function() {
		
		var nombre = $(".nombre").val();
			email = $(".email").val();
			validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
			mensaje = $(".mensaje").val();
		
		if (nombre == "") {
		    $(".nombre").focus();
		    return false;
		}else if(email == "" || !validacion_email.test(email)){
		    $(".email").focus();	
		    return false;
		}else if(mensaje == ""){
		    $(".mensaje").focus();
		    return false;
		}else{
			$('.ajaxgif').removeClass('hide');
			var datos = 'nombre='+ nombre + 
						'&email=' + email + 
						'&mensaje=' + mensaje;
			$.ajax({
	    		type: "POST",
	    		url: "proceso.php",
	    		data: datos,
	    		success: function() {
					$('.ajaxgif').hide();
	      			$('.msg').text('Mensaje enviado!').addClass('msg_ok').animate({ 'right' : '130px' }, 300);	
	    		},
				error: function() {
					$('.ajaxgif').hide();
	      			$('.msg').text('Hubo un error!').addClass('msg_error').animate({ 'right' : '130px' }, 300);					
				}
	   		});
	 		return false;	
		}
	});
});

PHP

Código:

<?php
// Guardar los datos recibidos en variables:
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
// Definir el correo de destino:
$dest = "[email protected]"; 
 
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers = "From: $nombre $email\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
 
// Aqui definimos el asunto y armamos el cuerpo del mensaje
$asunto = "Contacto";
$cuerpo = "<strong>Nombre:</strong> ".$nombre."<br>";
$cuerpo .= "<strong>Email:</strong> ".$email."<br>";
$cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
 
// Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
if($nombre != '' && $email != '' && $mensaje != ''){
    mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
}
?>

Este código funciona si el formulario lo hago en html, pero al crearlo en javascript se me resetea todo al darle al botón como si no funcionara el ajax. ¿Qué puedo hacer? ¿funciona ajax con elementos creados por javascript?

Gracias.