LINUX.ORG.RU

Как в действительности работает jquery click(function(event){...})?

 


0

1

Ранее думал, что все изменения на странице выполняются через манипуляции с DOM. Понадобилось сделать AJAX-навигацию, с установкой обработчиков на ссылки стало понятно, что все сложнее. Сначала для обработки ссылок с class=«ajax» засунул в $(document).ready():

    $(".ajax").click(function(event){
      event.preventDefault();
      ajax_navigate(this.href);
      return false;
    });
DOM этот код явно не меняет, никак не изменяя видимые в коде страницы атрибуты.
Навигация заработала, но затем я увидел, что по недосмотру в ответ на AJAX-запросы сервер выдает страницу целиком, а не блок контента. После исправления этой ошибки ссылки в загруженном через AJAX блоке перестали AJAX'ифицироваться. Тогда я добавил такой же код в function(data){...} AJAX-запроса, чтобы по его завершении обрабатывались новые ссылки в загруженном блоке.
После этого произошло вот что:

  • ссылки в загруженном блоке AJAX'ифицироваться все равно не стали
  • ссылки на базовой странице стали после каждого нажатия «удваивать» количество вызовов, вызывая в последующем многократную подгрузку, а после какой-то последовательности (закономерность пока не понял) вызывать зацикленную подгрузку поочередно нескольких разных страниц.

Что на самом деле происходит при назначении функции через $(...).click()? Как-то можно (Firebug'ом, ...) посмотреть, что в действительности навешено на ссылку в данный момент?

★★

нет, через дев тулбары браузеров ты увидишь только один хэндлер, т.к. jquery хранит все их сама, а на дом вешает только один обработчик.

wwwsevolod ()
Ответ на: комментарий от wwwsevolod

Но хранит то она их в JS-движке браузера, значит, должна быть какая-то возможность их вывести.

Пожалуй, вопрос следует расширить. Что происходит при нажатии на ссылку? Куда, кроме href и onclick, смотрит браузер?

shatsky ★★ ()
Ответ на: комментарий от shatsky

ну если хотите напишите плагин для firebug \ webkit dev tools для разворачивания внутренних объектов в описании слушателей. По дефолту они смотрят лишь на то что привязано к дом ноде, и внутрь не лезут - не их это занятие.

что значит куда смотрит браузер?

wwwsevolod ()

Обработчик нужно вешать на контейнер, а не на ссылку. События будут «всплывать» (bubble), просто нужно использовать event.target для получения элемента вызвавшего событие вместо this.

hidden_4003 ()
Ответ на: комментарий от shatsky

Вам нужно познать хотя бы азы JavaScript, прежде чем пытаться делать AJAX сайты.

Дело здесь вовсе не в jQuery и не хранит она это все в своих объектах (ну точнее хранит, но не так как вам здесь описывают)

начните с этого:
http://javascript.ru/tutorial/events

BaBL ★★★★★ ()
Ответ на: комментарий от shatsky

вот допустим есть объект ноды HthmlNode divNodeWithSomeClass = document.querySelector('.bullshit');

ты делаешь: divNodeWithSomeClass.addEventListener('click', function() { alert('asd'); }); и представим что функция addEventListener делает следующее: addEventListener: function(eventType, callback) { this.callbacks[eventType].push(callback) }

а когда ты делаешь $('.bullshit').click(function() { alert(123) }) jquery делает вызов addEventListener только один (первый) раз, остальные разы она так же записывает в своё нутро.

wwwsevolod ()

Всем спасибо. Я изначально думал, что событийная модель сводится к атрибутам тегов вроде onclick, а вышеописанное реализовано как-то отдельно. Самое время узнать правду, да.

Кстати, описание конкретно своей ситуации нашел здесь: http://docs.jquery.com/Tutorials:AJAX_and_Events

shatsky ★★ ()
Ответ на: комментарий от shatsky

«Атрибуты тегов вроде onlick» это такой костыль, который по-разному работал в разных браузерах. Не делай так.

Xellos ★★★★★ ()

Надо делать не

$('.ajax').click(function() {} );
а
$('.ajax').live('click', function() {} );
и все подгружаемые ссылки волшебным образом заработают

Photon79 ()
Ответ на: комментарий от Photon79

Во-первых, live() отменён. Во-вторых, данный вариант работает со всеми .ajax, в том числе будущими. А что до производительности - пора поменять свой Pentium III.

Xellos ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.