Question

关于事件处理的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()方法的结果。那是为什么？

Answer 1

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

Answer 2

这是因为您正在“此”上下文中运行。因此，你在$（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

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

2 个答案: