jQuery/JavaScript - event.target.id on Firefox

Question

I have a short script written which works fine on Chrome:

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

However, in Firefox event is not defined. I've found some similar questions which suggested that event needs to be passed in as a parameter to the function:

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

Yet, for me this solution does not fix the Firefox problem, and it actually breaks how it works in Chrome. In Chrome, it ends up saying that event.target is not defined when these are passed.

What am I doing wrong?

After receiving a few comments I've realized that how I was thinking about jQuery in general was wrong. I did not want $(document).ready called on every update of the sentence. Cleaning up the function with this knowledge I ended up with:

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

This still correctly updates the sentence in Chrome, yet target continues to be undefined in Firefox. What might I need to do to get this to work in Firefox? And am I still doing something fundamentally wrong in jQuery?

Also, to answer a question in the comments, the event I'm looking for is the onchange event that triggered updateSentence(). This should be called when a select/text field is changed.

(I'm still new to jQuery and JavaScript in general, and I'm sure I'm just making a simple mistake.)

---

I found my answer. I will post in a couple hours when the site allows me to.

Answer 1

Yes, very good. If you rethink how you did this it makes more sense. Separate your binding from your function and that is half the battle with what you are doing.

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

And moreover, this is one of those cases I would suggest not even using a secondary function. In some cases, what you want to do is simple enough that it hard to justify having a function to call other than what you do on the bind.

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

You will notice in both of these cases the need for event is obviated. However, it is available, even for FF, as it will be passed in as n argument (function(event)).

The reason your 'target' is undefined in your code for FF is because FF won't grab the event out of the air like most browsers. So if you cannot setup your code to eliminate the need for the event, or pass it in as in my examples, you can refer to it via window.event.