jQuery/JavaScript - event.target.id en Firefox

Question

Tengo un guión escrito corto que funciona muy bien en Chrome:

function updateSentence(){ 
    $(document).ready(function() { 
     t = event.target.id; 
     $("#S"+t).html($("#"+t).val()); 
    }); 
} 

Sin embargo, en el caso de Firefox no está definido. He encontrado algunas preguntas similares que sugerían que caso tiene que ser pasado como parámetro a la función:

function updateSentence(event){ 
    $(document).ready(function(event) { 
     t = event.target.id; 
     $("#S"+t).html($("#"+t).val()); 
    }); 
} 

Sin embargo, para mí, esta solución no soluciona el problema de Firefox, y que en realidad se rompe cómo funciona en Chrome. En Chrome, termina diciendo que event.target no está definido cuando se pasan.

¿Qué estoy haciendo mal?

Después de recibir algunos comentarios, me di cuenta de que la forma en que estaba pensando en jQuery en general era incorrecta. No quería $(document).ready llamado en cada actualización de la oración. La limpieza de la función con este conocimiento que terminó con:

function updateSentence(){ 
    t = event.target.id; 
    $("#S"+t).html($("#"+t).val()); 
} 

Esto todavía actualiza correctamente la frase en Chrome, sin embargo, continúa target que no está definido en Firefox. ¿Qué podría necesitar hacer para que esto funcione en Firefox? ¿Y sigo haciendo algo fundamentalmente malo en jQuery?

Además, para responder una pregunta en los comentarios, el evento que estoy buscando es el onchange evento que desencadenó updateSentence(). Esto debe invocarse cuando se cambia un campo de selección/texto.

(estoy todavía nuevo en jQuery y JavaScript en general, y estoy seguro de que sólo estoy haciendo un simple error.)

---

encontré mi respuesta. Publicaré en un par de horas cuando el sitio me lo permita.

Answer 1

Sí, muy bueno. Si reconsideras cómo hiciste esto, tiene más sentido. Separe su encuadernación de su función y esa es la mitad de la batalla con lo que está haciendo.

$(function() { // Equivalent of Document Ready; You only need this once; 
    // BINDINGS HERE 
    $('someSelector').on('change keypress', function(event) { 
    updateSentence(this); 
    }); 
}); 

function updateSentence(elem) { 
    $('#S' + elem.id).html(elem.value) ; 
} 

Y, además, este es uno de esos casos que sugeriría que ni siquiera utilizara una función secundaria.En algunos casos, lo que desea hacer es lo suficientemente simple como para justificar que tenga una función para llamar, además de lo que hace en el enlace.

$(function() { 
    $('someSelector').on('change keypress', function(event) { 
    $('#S' + this.id).html(this.value) ; 
    }); 
}); 

Usted se dará cuenta en ambos casos se obvia la necesidad de event. Sin embargo, está disponible, incluso para FF, ya que se pasará como n argumento (function(event)).

La razón por la que su "objetivo" no está definido en su código para FF es porque FF no tomará el event como la mayoría de los navegadores. Entonces, si no puede configurar su código para eliminar la necesidad del event, o lo transfiere como en mis ejemplos, puede consultarlo a través del window.event.

Answer 2

Después de tomar en cuenta lo mencionado en los comentarios anteriores y leer lo que estaba haciendo un poco más, encontré la respuesta a mi pregunta. En primer lugar, estaba usando incorrectamente una llamada $(document).ready cada vez que se llamaba a la función. A continuación, mi comprensión de cómo se pasó la ID a la función parece ser incorrecta. Parece que no se pasa automáticamente, sino que debe hacerse manualmente. Por lo tanto, mi confusión inicial sobre por qué los otros comentaristas estaban confundidos por mi pregunta. En cualquier caso, sabiendo estas cosas, encontré mi respuesta en una combinación de otras dos preguntas respondidas. Se pueden encontrar en estas dos preguntas desbordamiento de pila:

• Getting the ID of the element that fired an event

• JavaScript - onClick to get the ID of the clicked button

Estoy seguro de que todavía estoy diciendo algo incorrecto en esta explicación, pero yo Aprenderemos más pronto.