jQueryJavaScript - event.target.id on Firefox - Stack Overflow

admin管理员组

文章数量:1330564

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 ments 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 ments, 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.

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 ments 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 ments, 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.

• javascript
• jquery
• events
• firefox
• google-chrome

Share Improve this question Follow edited Jun 19, 2013 at 0:09 golmschenk asked Mar 27, 2012 at 17:18 golmschenkgolmschenk 12.4k2121 gold badges8484 silver badges143143 bronze badges 9

• 2 What do you expect the target to be? $(document).ready sends jQuery itself as an argument - there isn't a target element. – pimvdb Commented Mar 27, 2012 at 17:19
• 2 I don't think running the (document).ready inside another function is a good idea. It is supposed to run once, on page 'ready'. If called after that event it will not act as you want it to. – lifeIsGood Commented Mar 27, 2012 at 17:23
• 3 Your use of 'however in Firefox' suggests that, in some other browser, you're getting a result from somewhere. You really shouldn't be. Not with that script. – David Thomas Commented Mar 27, 2012 at 17:24
• Ah, so it would seem my problem is my understanding of the basics of JQuery. I'll look into how my function is setup in general first then. Thank you! – golmschenk Commented Mar 27, 2012 at 17:29
• 1 @golmschenk - can you post more code/html based on when and why this is called? In your update you have event, but nowhere is it defined. Where is this ing from? How is updateSentence being called? – mrtsherman Commented Mar 27, 2012 at 17:49

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 2

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.

After taking into account what was mentioned in the above ments 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 menters were confused by my question. In any case, knowing these things, I found my answer in a bination 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.

本文标签： jQueryJavaScripteventtargetid on FirefoxStack Overflow