Контекст внутри $().click(function(){})?

391
02 февраля 2017, 03:08
$(document).ready(function(){
  console.log( $('form[data-ajax]') ); //Возвращает domHtmlElement
  $('form[data-ajax]').click( function( event ){
    console.log(this);// возвращает чистый html, как будто я вызвал .html()
  } )
})

Что я делаю не так? Всё же работало всегда, this внутри .on(function(){}) всегда возвращал domHtmlElement? Нет?

Всё ещё не понятно, чем объясняется такое поведение?

element = $('form.form-ajax');
$( element ).submit(function(event){
    console.log(typeof element); //object
    console.log(typeof this); //object
    console.log(this); //html
    console.log(element); //jquery object
    console.log(element === this)//false
}

Получается, element и this - объекты разных типов? Если да, то почему так получается? Я же .on вешаю на jquery object, значит и контекст должен быть в коллбэке jquery object, нет? А если нет (я вижу, что нет), то почему так происходит и где подробнее почитать про это?

Answer 1

Функция $(...) всегда возвращает объект jQuery.

Таким образом следующее утверждение неверно

console.log( $('form[data-ajax]') ); //Возвращает domHtmlElement

функция console.log сама решает как именно отобразить переданный аргумент и так как ее поведение зависит от реализации в браузере, следующее утверждение также неверно

console.log(this);// возвращает чистый html, как будто я вызвал .html()

Значение this внутри обработчика события устанавливается в Html элемент, на котором это событие подписано.

Таким образом сравнение html элемента с объектом jquery

element === this

Ожидаемо вернет false.

Answer 2

Вам возвращается элемент. Вы этот элемент пытаетесь вывести в лог, для этого он преобразовывается в строку. Алгоритмов преобразований может быть куча. В данном случае берется свойство outerHTML

$(document).ready(function() { 
  console.log(typeof $('#test')); 
  $('#test').click(function(event) { 
    console.log(typeof this); 
    console.log(this); 
    console.log(this.id); 
  }); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="test">Test</div>

READ ALSO
Сортировка JS объекта
javascript

Сортировка JS объекта

Доброго времени суток, мои познания в JS весьма скромны, и я уже бьюсь несколько дней над вроде простой задачейЕсть объект:

 359
Конфликт прелоадера с API Google maps
javascript

Конфликт прелоадера с API Google maps

Доброго времени суток!

 366
Удалить елемент в jQuery
javascript

Удалить елемент в jQuery

Как можно удалить весь item при нажатии на кнопку "Удалить"? Этих итемов может быть неограниченное количество

 320
Не работают генераторы
javascript

Не работают генераторы

Не работают генераторы, выкидывает ошибку

 418