[SOLUCIONADO] No cambia la variable con onFocus del textarea

[LuisCZ]

Hola! estoy teniendo un problema con (sospecho yo) una variable de javascript. EL asunto es que estoy generando dinamicamente unos textarea con php y cada uno de ellos deben poseer un conteo de caracteres los cuales estoy trabajando con jquery.

este es el script jquery:

Código:

var _nivel = 0;

$(document).ready(function() {
var limite = 500;
	$('#mensaje'+_nivel).keyup(function() {
		var longitud = $(this).val().length;
		var resto = limite - longitud;
		$('#totalcar'+_nivel).html(resto);
		if(resto <= 0){
			$('#mensaje'+_nivel).attr("maxlength", limite);
		}
	});
	$('#mensaje'+_nivel).keydown(function() {
		var longitud = $(this).val().length;
		var resto = limite - longitud;
		$('#totalcar'+_nivel).html(resto);
		if(resto <= 0){
			$('#mensaje'+_nivel).attr("maxlength", limite);
		}
	});
});

asi quedan los textarea generado dinamicamente:

Código HTML:

<textarea id='mensaje".$id."' onFocus='_nivel=".$id.";'></textarea>
<span id='totalcar".$id."'/>500</span> 

El problema es que solo me funciona el textarea "mensaje0", el resto... nada que ver. Pero si le cambio manualmente el valor a la variable _nivel a 5 por ejemplo me funciona solo el "mensaje5".

¿cual es mi error?

Saludos y muchas gracias de antemano!

[Rosencrantz]

usa .on()

http://api.jquery.com/on/

Lee mi respuesta en este thread, cambiando click por keyup y keydown respectivamente
http://www.forosdelweb.com/f179/even...mente-1057374/

[LuisCZ]

Hola Rosencrantz, gracias por responder! estuve probando pero sigue sin funcionar . Lo coloque de esta manera:

Código:

$(document).ready(function() {
var limite = 500;
	$('#mensaje'+_nivel).on('keyup', function(event) {
		var longitud = $(this).val().length;
		var resto = limite - longitud;
		$('#totalcar'+_nivel).html(resto);
		if(resto <= 0){
			$('#mensaje'+_nivel).attr("maxlength", limite);
		}
	});
	$('#mensaje'+_nivel).on('keydown', function(event) {
		var longitud = $(this).val().length;
		var resto = limite - longitud;
		$('#totalcar'+_nivel).html(resto);
		if(resto <= 0){
			$('#mensaje'+_nivel).attr("maxlength", limite);
		}
	});
});

[Rosencrantz]

Prueba con algo como esto, on() se escribe distinto dependiendo de si el elemento es estático o dinámico, la versión dinámica es esta e implica el uso del context o el contenedor del elemento dinámico (donde aparece).

Código:

$('#contenedor_donde_aparecen_los_textarea').on('keyup',''#mensaje'+_nivel', function(event) {
		var longitud = $(this).val().length;
		var resto = limite - longitud;
		$('#totalcar'+_nivel).html(resto);
		if(resto <= 0){
			$('#mensaje'+_nivel).attr("maxlength", limite);
		}
	});

Espero sirva, saludos.

[LuisCZ]

El problema es que los text areas se generan dinamicamente dentro de ul > li > que a su vez contiene div con el id generado dinamicamente...

Probe colocando donde tu me dices el div general que contiene todo esto pero sigue sin funcionar como podria solucionarlo

[jrobinsonc]

Aquí te pongo un ejemplo funcionando.

Con este script te debe de funcionar:

Código Javascript:

var field_limit = 500;
 
jQuery(function($){
    $('textarea').on('keyup keydown', function() {
        var $self = $(this),
            id = $self.attr('id').substr(7),
            $span = $('#totalcar' + id),
            field_length = $self.val().length,
            field_rest = field_limit - field_length;    
        
            $span.html(field_rest);
    });
});
 

Solo tienes que tomar en cuenta lo siguiente:

• La variable _nivel no es necesaria.
• Elimine el atributo onFocus de la etiqueta textarea por que no es necesario si jquery maneja el keyup y el keydown del elemento.

En esta url te pongo un ejemplo en funcionamiento:
http://jsfiddle.net/jrobinsonc/Dax99/

[LuisCZ]

Perfecto jrobinsonc! funcionó a la perfección! muchas gracias jrobinsonc todavía tengo mucho que aprender de JQUERY

Muchísimas gracias también a ti Rosencrantz!

Saludos!