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中的句子，但在Firefox中仍然未定义target。为了让它在Firefox中运行，我需要做些什么？我在jQuery中仍然做了一些根本错误的事情吗？

另外，要回答评论中的问题，我正在寻找的事件是触发onchange的{{1}}事件。当选择/文本字段改变时应该调用它。

（我一般都是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调用。接下来，我对ID如何传递给函数的理解似乎是不正确的。它似乎没有自动传递，而是必须手动完成。因此，我最初的混淆是为什么其他评论者对我的问题感到困惑。无论如何，知道这些事情后，我在另外两个问题的答案中找到了答案。它们可以在这两个Stack Overflow问题中找到：

我确信在这个解释中我仍然说错了，但我会在短期内了解更多信息。

jQuery / JavaScript - 关于Firefox的event.target.id

2 个答案: