jQuery 控制台在事件发生之前返回结果答案

【问题标题】：jQuery console this returns result before event happensjQuery 控制台在事件发生之前返回结果
【发布时间】：2014-08-22 02:02:25
【问题描述】：

关于事件处理的jQuery快速问题。

这是简单的代码

<div id="txt">change me!</div>


$('#txt').click(function () {
    console.log(this);
    $(this).text('changed!');

});

这个输出

<div id="txt">changed!</div>

在控制台中。虽然console.log(this) 在text() 方法之前执行，但我得到text() 方法被触发的结果。这是为什么呢？

【问题讨论】：

标签： javascript jquery console

【解决方案1】：

发生这种情况是因为您在“this”上下文中运行。因此，您在 $(this) 中所做的任何更改都会被提升到函数的顶部。一个简单的例子：

$('#txt').click(function () {
    console.log(this);
    var a = 10;
    var b = 20;
    var c = a+b;
    console.log(c);    
    $(this).text('changed!');
    $(this).attr('test','test');
});

将在顶部提升

$(this).text('changed!');
$(this).attr('test','test');

结果是

<div id="txt" test="test">changed!</div>
30

JSFiddle

【讨论】：

这根本没有任何意义。提升仅提升变量声明（而不是定义）和函数表达式，它不会像您建议的那样重新排列代码行。在您的示例中，console.log(c); 将始终在 $(this).text('changed'); 之前触发，无论是否提升。

【解决方案2】：

Console.log fires late in Chrome。如果您想在点击时记录元素，您可以创建元素的克隆，然后按照this SO post 记录克隆。

另外，这应该在$(document).ready 函数中

$(document).ready(function () {
    $('#txt').click(function () {
        var foo = $(this).text();
        console.log(this);            // Will have changed! because it's firing after everything else
        $(this).text('changed!');    
        console.log(foo);    
    });
});

控制台输出

<div id="txt">changed!</div>
change me!

见Updated JsFiddle

【讨论】：

我明白了。我可以接受最终的 HTML 输出。但我的问题是方法（函数）执行的顺序。我期望在控制台中看到的是<div id="txt">change me!</div>，而不是<div id="txt">changed!</div>，因为console.log 在jquery text() 方法之前执行。
我现在明白了。另一个我不知道的东西。下次我会注意的。