На этом шаге мы рассмотрим особенности взаимодействия AJAX и событий.
Предположим, что для каждого термина необходимо обеспечить возможность управления отображением определения, следующего за ним, - щелчок мышью на термине должен приводить к отображению или сокрытию связанного с ним определения. Используя приемы, с которыми мы уже познакомились, добиться этого будет совсем несложно:
$(docunent).ready(function() {
$('.term').click(function() {
$(this).siblings('.definition').slideToggle();
});
});
Когда пользователь щелкнет на термине, это программный код отыщет братские элементы с классом definition и свернет их или развернет.
Похоже, что все сделано правильно, но при такой реализации щелчок мышью не будет давать ожидаемого эффекта. К сожалению, в момент подключения обработчика события click к терминам сами термины еще не включены в состав документа. Даже если бы нам удалось подключить к этим элементам обработчики события click, после щелчка на другой ссылке, вызывающей загрузку нового списка терминов, эти обработчики окажутся отключенными.
Эта проблема характерна для областей страницы, заполняемых средствами AJAX. Распространенное решение этой проблемы заключается в повторном подключении обработчиков всякий раз, когда происходит обновление этой области страницы. Однако такое решение может оказаться громоздким, так как программный код, выполняющий подключение обработчиков, необходимо вызывать всякий раз, когда изменяется структура дерева DOM страницы.
Более предпочтительная альтернатива была представлена на 42 шаге: мы можем использовать прием делегирования событий, привязывая фактический обработчик события к элементу-предку, который никогда не изменяется. В данном случае мы подключим обработчик события click к элементу document с помощью метода .live() и будем перехватывать события, как показано ниже:
$(document).ready(function() {
$('.term'). live('click' , function() {
$(this).siblings('.definition').slideToggle();
});
});
Метод live() предписывает браузеру отслеживать все события click, которые могут возникать в любом месте страницы. При этом обработчик события будет вызываться, только если элемент соответствует селектору term. Теперь сворачивание и разворачивание описания любого термина будет обеспечено даже в случае, когда словарная статья добавляется более поздней операцией.
На следующем шаге мы рассмотрим ограничения безопасности.
