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

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

另外,为了回答评论中的问题,我正在寻找的onchange事件是触发的事件updateSentence().更改选择/文本字段时应调用此方法.

(我一般都是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。