cómo enlazar a desenfoque y cambio, pero solo desencadenar una función una vez en Jquery/Javascript?

Question

Estoy intentando activar una función cuando se cambia un elemento seleccionado.

Como Ipad tiene problemas con on ('cambio'), también deseo enlazar con 'blur', que funciona bien en Ipad.

Sin embargo no quiero ambos eventos para activar la función dos veces, por lo que necesitan algún tipo de gancho para asegurarse de que si tanto el cambio y desenfoque gatillo, que la función subyacente es sólo disparó una vez.

Esto es lo que estoy haciendo ahora, pero ... no muy agradable:

// make sure binding is only assigned once 
var compSel = $('#my_select'); 
if (compSel.jqmData('bound') != true){ 
    console.log("bound"); 
    compSel.jqmData('bound', true) 
     .on($.support.touch ? 'blur' : 'change', function(){ 
      console.log("trigger"); 
      // run function xyz 
     }) 
    }    

Esto funciona si se puede vivir con todos los dispositivos de la toma tangible ver con la falta de definición .

Pregunta:
¿Alguien tiene una idea mejor para asegurarse de que la falta de definición y cambiar sólo desencadenar una función de una sola vez?

¡Gracias por la ayuda!

Answer 1

Intente crear una función, vinculada a ambos eventos y agregando un tiempo de espera para llamar a la función. De esta forma, si se llama a la función varias veces, solo se ejecutará una vez.

Algo como esto (se puede ajustar el tiempo de espera si es necesario):

function blurChange(e){ 
    clearTimeout(blurChange.timeout); 
    blurChange.timeout = setTimeout(function(){ 
     // Your event code goes here. 
    }, 100); 
} 

$('#my_select').on('blur change',blurChange); 

Answer 2

No es agradable, pero se puede llamar a change en la función blur, y hacer todas las cosas en la función change:

... 
$(document).on("change", "#yourelement", function(){ 
    //do your stuff 
}); 
.... 
$(document).on("blur", "#yourelement", function(){ 
    $("#yourelement").change(); 
    //alternatively, you can trigger the change event 
    //$("#yourelement").trigger("change"); 
}); 

No se ve muy bien, pero creo que debería funcionar.

EDITAR: Si el navegador inicia ambos eventos (desenfoque y cambio), este código llamará dos veces la funcionalidad change. Creo que se puede lograr que el comportamiento con algún tipo de indicador:

var executed = false; 
... 
$(document).on("change blur", "#yourelement", function(){ 
    if(!executed){ 
     executed = true; 
     //do your stuff 
    } 
}); 

Answer 3

no saben de iPad, pero en el navegador tal vez algo como esto

$("#dataTable tbody").on("click blur", "tr", function(event){ 
     if (event.type == "click") 
     { 
     //do stuff 
     } 
     else 
     { 
     //do nothing 
     } 
}); 

Answer 4

Puede unirse a múltiples eventos en el mismo tiempo:

$(document).on('blur change','#mySelector',function(){ 
    // this is called on either 
}); 

Answer 5

adjuntar varios eventos que se pueden utilizar de esta manera también

<select class="form-control" id="Category" name="Category" required> 
    <option value="">Choose an option</option> 
    <option value="1">Your Text</option> 
</select> 
<p class=""></p> 

$("#Category").on("blur change", function(event) { 
    if($(this).val()===""){ 
      $(this).next().text("Please choose category").css("color","#a94442"); 
     } 
     else 
     { 
      $(this).next().text(""); 
     } 

});