Tag: jquery

Método Click en elementos creados dinámicamente con Javascript o Jquery

Al crear un elemento dinámicamente con javascript o utilizando jquery nos vemos con un problema, el cual muchas veces es un quebradero de cabeza. Estoy hablando de utilizar el elemento con jQuery utilizando los métodos click(), change(), blur(), etc…

Supongamos que hemos creado un elemento <input type=»button» id=»saveBtn» class=»btn» value=»Guardar» /> por javascript y lo incluimos en el documento con «.append()» o «.html()».

Ahora, queremos añadirle un click() method a nuestro nuevo amigo usando jQuery. NO SE PUEDE!

$('#saveBtn').click(function () {alert($(this).attr("id")); }); 

¿Por qué? Porque a la hora de cargar el documento este elemento no existía. Los métodos solamente se asocian (bind) con los elementos que se cargan en el momento de que el navegador ejecute la carga del DOM (Document Object Model), por lo que jQuery directamente pasa del tema.

La solución

Utilizaremos el método on() para decirle al documento que nos busque el elemento que necesitamos, y asociarle el método click de la siguiente manera:

$(document).on('click', '#saveBtn', function () {
    alert($(this).attr("id"));
});

Para acceder al elemento y utilizarlo, haremos algo parecido, buscando el elemento cuyo atributo «id» sea «saveBtn»:

var dataId = $('[id^="saveBtn"]');

Si queremos acceder utilizando la clase:
var dataId = $('[class^="btn"]');

Para casos extremos en el que no podamos realizar acciones con algunos elementos del documento, os dejo además estos métodos nativos de javascript:

El id del elemento: document.getElementById('saveBtn');

La etiqueta html: document.getElementsByTagName('input');

La clase: document.getElementsByClassName('btn');

El selector: document.querySelectorAll('input.btn');

Validar Tamaño y Tipo de Archivo Input File con HTML + Jquery

Validar tipo de archivo con HTML

Para validar el tipo de archivo que puede aceptar un Input File necesitaremos el atributo «accept» para que una vez se abra el dialogo para elegir el archivo se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.


<input id="campoFile" accept="tipo_de_archivo|audio/*|video/*|image/*|media_type" name="archivo" type="file" value="" />

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc): accept=»audio/*»
IMAGES: accept=»image/gif,image/jpeg,image/jpg,image/png»
EXCEL 97-2003 (.xls): accept=»application/vnd.ms-excel»
EXCEL 2007+ (.xlsx): accept=»application/vnd.openxmlformats-officedocument.spreadsheetml.sheet»
PDF: accept=».pdf»
VIDEO (.avi, .mpg, .mpeg, .mp4): accept=»video/*»

Validar Tamaño y Extensión con Javascript y Jquery

Para validar el tamaño del archivo utilizaremos una función muy sencilla utilizando JQUERY antes de enviarlo por POST.

Prueba con las diferentes extensiones y cambia el código Javascript para ver los resultados: