jQuery/JavaScript - event.target.id na Firefox

Question

Mam krótki skrypt napisany który działa dobrze na chrome:

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

Jednak w przypadku Firefoksa nie jest zdefiniowana. Znalazłem kilka podobnych pytań, które sugerowały, że zdarzenie musi zostać przekazany jako parametr do funkcji:

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

Jednak dla mnie to rozwiązanie nie rozwiąże problemu Firefox, i faktycznie łamie jak to działa w Chrome. W Chrome kończy się stwierdzenie, że event.target nie jest zdefiniowany, gdy są one przekazywane.

Co robię źle?

Po otrzymaniu kilku komentarzy uświadomiłem sobie, że to, w jaki sposób myślałem o jQuery w ogóle, było złe. Nie chciałem, aby $(document).ready było wywoływane przy każdej aktualizacji zdania. Czyszczenie funkcję z tej wiedzy skończyło się z:

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

To nadal poprawnie aktualizuje zdanie w Chrome, ale target nadal niezdefiniowana w Firefoksie. Co mogę zrobić, aby to działało w Firefoksie? Czy nadal robię coś zasadniczo niewłaściwego w jQuery?

Aby odpowiedzieć na pytanie w komentarzach, wydarzenie, którego szukam, jest zdarzeniem onchange, które wywołało updateSentence(). Powinno to zostać wywołane, gdy pole wyboru/tekst zostanie zmienione.

(wciąż jestem nowy na jQuery i JavaScript w ogóle, i jestem pewien, że jestem tylko co prosty błąd.)

---

znalazłem moją odpowiedź. Będę publikować za kilka godzin, kiedy strona mi pozwoli.

Answer 1

Tak, bardzo dobrze. Jeśli przemyślisz, jak to zrobiłeś, ma to więcej sensu. Oddziel swoje wiązanie od funkcji, a to połowa sukcesu z wykonywaną czynnością.

$(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) ; 
} 

Co więcej, jest to jeden z tych przypadków, które sugerowałbym, nie używając nawet funkcji drugorzędnej.W niektórych przypadkach to, co chcesz zrobić, jest na tyle proste, że trudno usprawiedliwić posiadanie funkcji do wywoływania innej niż to, co robisz w wiązaniu.

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

Można zauważyć w obu tych przypadkach potrzeba event zostaje zlikwidowane. Jednak jest dostępny, nawet dla FF, ponieważ zostanie przekazany jako argument n (function(event)).

Powód, dla którego "cel" jest niezdefiniowany w kodzie dla FF, jest taki, że FF nie będzie wychwytywał z powietrza jak większość przeglądarek event. Jeśli więc nie możesz skonfigurować swojego kodu, aby wyeliminować konieczność stosowania event lub przekazać go jak w moich przykładach, możesz odwołać się do niego poprzez window.event.

Answer 2

Po uwzględnieniu tego, co wspomniano w powyższych komentarzach i przeczytaniu tego, co robiłem, znalazłem odpowiedź na moje pytanie. Po pierwsze, błędnie używałem wywołania $(document).ready za każdym razem, gdy funkcja była wywoływana. Następnie moje rozumienie, w jaki sposób identyfikator został przekazany do tej funkcji, wydaje się nieprawidłowe. Wygląda na to, że nie jest przekazywany automatycznie, ale zamiast tego musi być wykonywany ręcznie. Stąd moje początkowe zamieszanie, dlaczego inni komentatorzy byli zdezorientowani moim pytaniem. W każdym razie, znając te rzeczy, znalazłem odpowiedź w połączeniu z dwoma innymi odpowiedziami na pytania. Można je znaleźć w tych dwóch pytań przepełnienie stosu:

• Getting the ID of the element that fired an event

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

Jestem pewien, że wciąż mówi coś innego złego w tym wyjaśnieniem, ale wkrótce się uczą.