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.

Solution 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.

Solution 2

After taking into account what was mentioned in the above comments and reading into what I was doing a bit more, I found the answer to my question. First, I was incorrectly using a $(document).ready call every time the function was called. Next, my understanding of how the ID was passed to the function seems to be incorrect. It appears that it is not passed automatically, but instead must be done manually. Hence, my initial confusion as to why the other commenters were confused by my question. In any case, knowing these things, I found my answer in a combination of two other answered questions. They can be found in these two Stack Overflow questions:

• Getting the ID of the element that fired an event

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

I'm sure I'm still saying something else wrong in this explanation, but I'll learn more shortly.

Comments

[williambq]

No, you do not seem to really see how the event propagates. The event bubbles, has properties, and one of them is the target. The target may have an id (it may not be set/addressable). But the target is from whence event issues. Thus, target.id is where you might find the id of the element. But you are not properly getting at event with your question (see my answer with how a: you can ignore the need to reference the event or b: if you really want to get at the id via the target via the event, then pass the event through so FF sees it directly OR access event via window.event