0

Tengo un input con la clase albaran y quiero que al entrar en el input se dispare eeste evento, pero no he logrado.

$('.albaran').on('focus', function () {
   console.log($(this).data('error'));
});
1
  • 1
    Aquí funciona jsfiddle.net/ebnk8jea tendrás tu código HTML para ver si no te falta jalar jQuery o agregar $(document).ready?
    – Yikarus
    el 14 jun. 2017 a las 22:25

5 respuestas 5

0

Dado que tu elemento es creado dinámicamente, el listener del evento se debe de implementar a todo el documento, de tal forma que como un parámetro más sea la clase de tu elemento:

$input = $("<input class='albaran' type='text' data-error='Error'/>");
$('body').append($input);

$(document).on('focus', '.albaran', function () {
   console.log($(this).data('error'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

Debería funcionar.

Aquí tienes el ejemplo funcionando:

$(function(){
  $('.albaran').on('focus', function() {
    console.log($(this).data('error'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="albaran" data-error="mensaje de error">

2
  • Asier, te comento a ti porque veo que tienes bastantes puntos más que los de los demás usuarios que han respondido. Creo que este tipo de preguntas, en las cuales todo funciona, se deberían de dejar como comentario y cerrar la pregunta por "no ser reproducible" ya que no aporta nada a lectores que lleguen a esta pregunta en un futuro, si no hay un motivo que sea el causante del error. el 14 jun. 2017 a las 22:29
  • 1
    Sí, en parte tienes razón. Pero mostrarle al que pregunta que esa parte del código funciona también puede ayudar a que descarte posibles problemas y hacerle buscar en la dirección correcta para solucionar el error. Incluso al lector que pueda llegar buscando información sobre el tema le pueda aportar encontrar ejemplos de código funcionando. No sé. No lo tengo tan claro. el 15 jun. 2017 a las 6:57
0

Aquí te agrego otro ejemplo.

var input = document.querySelector('input'),
    log = document.querySelector('.log');
multipleEventsListeners(input, 'keyup change', function(e){
  log.textContent = 'Valor agregado: ' + this.value;
});



function multipleEventsListeners(elem, events, func) {
  var event = events.split(' ');
  for (var i = 0; i < event.length; i++) {
    elem.addEventListener(event[i], func, false);
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  
  <input type="number" value="1" />
  <p class="log"></p>

</body>
</html>

0

Si el elemento no es creado de forma dinamica, te recomiendo usar la funcion .focus()

En terminos simples tu codigo seria:

$('.albaran').focus(function () {
   console.log($(this).data('error'));
});

Si tienes alguna duda, comenta.

Suerte.

Actualizacion

En ese caso lo unico que debes hacer es cambiar las comillas simples por dobles, se que suena tonto, pero tenia un problema similar pero con "click"

$('.albaran').on("focus", function () {
   console.log($(this).data('error'));
});

Si tienes una duda comenta, Suerte.

2
  • el elemento es creado de forma dinamica
    – Acd
    el 14 jun. 2017 a las 22:27
  • actualice la respuesta, espero que te sirva el 14 jun. 2017 a las 22:45
0

debes de cambiar tu codigo por lo siguiente

$('.albaran').on('focusin', function () {
   console.log($(this).data('error'));
});

......

El metodo de eventos de JQuery focusin se presenta solo cuando se le hace focus a dicho input o elemento del DOM y a raiz de ese evento generar una reaccion.

Puedes saber mas al respecto desde el siguiente link. https://api.jquery.com/focusin/ la cual es la pagina oficial de JQuery

1
  • ¿No podrías explicar por qué esto es la (psoible) solución? el 15 jun. 2017 a las 13:20

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.