JQuery/JavaScript - event.target.id на Firefox

Question

У меня есть короткий сценарий, написанный, который прекрасно работает на Chrome:

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

Однако в Firefox случае не определен. Я нашел несколько подобных вопросов, которые предположили, что событие должно быть передано в качестве параметра функции:

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

Тем не менее, для меня это решение не решает проблему Firefox, и это на самом деле ломает, как это работает в Chrome. В Chrome он заканчивает тем, что event.target не определяется при их передаче.

Что я делаю неправильно?

Получив несколько комментариев, я понял, что, как я думал о jQuery вообще, было неправильно. Я не хотел, чтобы $(document).ready вызывал каждое обновление предложения. Очистка функции с этим знанием я закончил с:

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

Это еще правильно обновляет предложение в Chrome, но target продолжает быть неопределенными в Firefox. Что мне нужно сделать, чтобы заставить это работать в Firefox? И я все еще делаю что-то принципиально неправильное в jQuery?

Кроме того, для ответа на вопрос в комментариях, я ищу событие onchange, которое вызвало updateSentence(). Это следует вызывать при изменении поля select/text.

(я еще новичок в jQuery и JavaScript в целом, и я уверен, что я просто сделать простую ошибку.)

---

Я нашел мой ответ. Я отправлю через пару часов, когда сайт позволит мне это сделать.

Answer 1

Да, очень хорошо. Если вы переосмыслите, как вы это сделали, это имеет смысл. Отделите свое обязательство от своей функции, и это половина битвы с тем, что вы делаете.

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

И кроме того, это один из тех случаев, которые я бы предложил, даже не используя вспомогательную функцию.В некоторых случаях то, что вы хотите сделать, достаточно просто, чтобы было сложно оправдать функцию вызова, отличную от того, что вы делаете в связи.

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

Вы заметите, в обоих этих случаях потребность в event отпадает. Однако он доступен даже для FF, поскольку он будет передан как n аргумент (function(event)).

Причина, по которой ваша цель не определена в коде для FF, заключается в том, что FF не будет захватывать event вне поля, как в большинстве браузеров. Поэтому, если вы не можете настроить свой код, чтобы устранить необходимость в event или передать его, как в моих примерах, вы можете обратиться к нему через window.event.

Answer 2

С учетом того, что было упомянуто в приведенных выше комментариях и чтениях в то, что я делал немного больше, я нашел ответ на свой вопрос. Во-первых, я неправильно использовал вызов $(document).ready каждый раз, когда вызывалась функция. Далее, мое понимание того, как идентификатор передается функции, кажется неправильным. Похоже, что он не передается автоматически, а должен выполняться вручную. Следовательно, моя первоначальная путаница относительно того, почему другие комментаторы были смущены моим вопросом. В любом случае, зная эти вещи, я нашел свой ответ в сочетании двух других ответов. Их можно найти в этих двух вопросов, связанной с переполнением стека:

• Getting the ID of the element that fired an event

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

Я уверен, что я все еще говорил что-то еще не так в этом объяснении, но я Скоро узнаю.