Консоль jQuery возвращает результат до того, как произойдет событие

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(). Почему это?

2 ответа

Console.log срабатывает в конце Chrome. Если вы хотите зарегистрировать элемент во время щелчка, вы можете создать клон этого элемента, а затем занести его в этот SO-сообщение.

Кроме того, это должно быть внутри функции $(document).ready

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

Консольный выход

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

См. Обновленный JsFiddle


Это происходит потому, что вы работаете в этом контексте. В результате все, что вы измените в $ (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

licensed under cc by-sa 3.0 with attribution.