jQuery/JavaScript - Firefox 上的 event.target.id

jQuery/JavaScript - event.target.id on Firefox

提问by golmschenk

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

我编写了一个在 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:

但是，在 Firefox 中没有定义事件。我发现了一些类似的问题，这些问题表明需要将事件作为参数传递给函数：

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.targetis not defined when these are passed.

然而，对我来说，这个解决方案并没有解决 Firefox 的问题，它实际上破坏了它在 Chrome 中的工作方式。在 Chrome 中，event.target当这些被传递时，它最终会说没有定义。

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).readycalled on every update of the sentence. Cleaning up the function with this knowledge I ended up with:

在收到一些评论后，我意识到我对 jQuery 的总体看法是错误的。我不想$(document).ready在每次更新句子时调用。用这些知识清理函数我最终得到：

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

This still correctly updates the sentence in Chrome, yet targetcontinues 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?

这在 Chrome 中仍然正确更新句子，但target在 Firefox 中仍然未定义。我需要做什么才能让它在 Firefox 中工作？我还在用 jQuery 做一些根本错误的事情吗？

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

另外，要回答评论中的问题，我正在寻找的onchange事件是触发updateSentence(). 这应该在选择/文本字段更改时调用。

(I'm still new to jQueryand JavaScriptin general, and I'm sure I'm just making a simple mistake.)

（总的来说，我对jQuery和JavaScript还是个新手，我敢肯定我只是犯了一个简单的错误。）

---

---

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

我找到了我的答案。当网站允许我发布时，我会在几个小时内发布。

采纳答案by williambq

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 eventis obviated. However, it is available, even for FF, as it will be passed in as n argument (function(event)).

您会注意到在这两种情况下都不需要event。但是，即使对于 FF，它也是可用的，因为它将作为 n 参数 ( function(event))传入。

The reason your 'target' is undefined in your code for FF is because FF won't grab the eventout 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.

在 FF 的代码中未定义“目标”的原因是因为 FF 不会event像大多数浏览器一样从空中抓取。因此，如果您无法设置代码以消除对 的需要event，或者如我的示例中那样将其传入，您可以通过window.event.

回答by golmschenk

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).readycall 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:

在考虑了上述评论中提到的内容并阅读了我正在做的事情之后，我找到了我的问题的答案。首先，$(document).ready每次调用函数时我都错误地使用了调用。接下来，我对ID如何传递给函数的理解似乎是不正确的。似乎它不是自动传递的，而是必须手动完成。因此，我最初的困惑是为什么其他评论者对我的问题感到困惑。无论如何，知道这些事情后，我在其他两个已回答问题的组合中找到了答案。它们可以在这两个 Stack Overflow 问题中找到：

• Getting the ID of the element that fired an event

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

• 获取触发事件的元素的 ID

• JavaScript - onClick 获取被点击按钮的 ID

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

我确信我在这个解释中仍然说错了一些东西，但我很快就会学到更多。