Урок — jquery.ready()
Содержание:
- window.load (Built-in JavaScript)
- Работа с выборкой
- link jQuery Migrate Plugin
- link Using jQuery with a CDN
- jQuery Core — All 1.x Versions
- Обработка событий с помощью методов jQuery
- Почему $, а не что-то ещё?
- Plain JavaScript ready() Alternative
- Описание метода jQuery.ready().
- Ожидание готовности DOM-модели
- jQuery Migrate — All Versions
- link Downloading jQuery
- jQuery Core — All 3.x Versions
- link About the Code
- Добавление событий к динамически созданным объектам
window.load (Built-in JavaScript)
The however will wait for the page to be fully loaded, this includes inner frames, images etc.
JavaScript
Copy Code
$(window).load(function()
{
alert("(window).load was called - window is loaded!");
});
* is a built-in JavaScript method, it is known to have some quirks in old browsers (IE6, IE8, old FF and Opera versions) but will generally work in all of them.
can be used in the body’s event like this (but I would strongly suggest you avoid mixing code like this in the HTML, as it is a source for confusion later on):
HTML
Copy Code
<html>
<head>
<script>
function foo()
{
alert("Page loaded!");
}
<script>
</head>
<bodyonload="foo()">
<h1>I didn't do it!</h1>
</body>
</html>
Warning — Do not confuse the method of the
element with the jQuery AJAX’s load method!!!
JavaScript
Copy Code
Работа с выборкой
После создания объекта jQuery содержащего вашу выборку, вы, вероятно, хотите что-то с ней сделать. Но до этого рассмотрим несколько принципов, которые являются ключевыми для понимания того, что делает jQuery.
Проверка выборки
Мы можем определить, соответствует ли выборка определённому критерию, с помощью метода .is(). Этот метод наиболее часто используется, чтобы предоставить селектор в качестве единственного аргумента. Он возвращает true или false в зависимости от того, соответствует ли выборка селектору:
Вы также можете передать в метод .is() объект jQuery, исходный элемент DOM или даже функцию, если вам нужна комплексная проверка. Смотрите документацию для получения подробной информации.
Получение, установка и неявный перебор
Есть много методов, которые вы можете вызвать после создания выборки. Эти методы, как правило, делятся на две категории: метод чтения (геттер) и устанавливающий метод (сеттер). Методы чтения извлекают фрагмент информации из выборки, а методы установки в некотором роде изменяют выборку. Практически во всех случаях методы чтения оперируют только первым элементом в выборке (.text() является известным исключением); методы установки же работают для всех элементов в выборке используя то, что известно как неявный перебор.
Неявный перебор означает, что jQuery автоматически перебирает все элементы в выборке, когда вы вызываете для выборки устанавливающий метод. Это означает, что если вы хотите сделать что-то для всех элементов в выборке, то не должны вызывать метод для каждого элемента в вашей выборке — просто вызываете метод для самой выборки и jQuery обработает элементы для вас.
Предположим, что вы хотите изменить HTML у всех пунктов списка на странице. Чтобы сделать это мы должны использовать метод .html(), который изменит HTML у всех выбранных пунктов списка.
Вы также можете передать функцию в метод установки jQuery. Возвращаемое значение этой функции используется в качестве нового значения и оно получает два аргумента: индекс элемента в выборке и старое значение, которое вы пытаетесь изменить. Это полезно, когда вам необходима информация о текущем состоянии элемента, чтобы правильно установить новое состояние.
Явный перебор
Иногда задача, которую вы пытаетесь решить, не вписываются ни в один из существующих методов jQuery и тогда вы должны сделать явный перебор выборки с помощью метода .each(). В следующем коде в начало пункта списка мы добавляем тег <b> содержащий индекс элемента списка.
Заметьте, что внутри функции, которую мы передаём в .each(), у нас есть два способа доступа к текущему исходному элементу DOM: через this и через elem. Как обсуждалось в разделе «Основы JavaScript», this — специальное ключевое слово в JavaScript, указатель на объект, который является текущим контекстом функции. В jQuery this почти всегда относится к исходному элементу DOM, с которым функция в данный момент работает. Так, в случае .each(), this относится к текущему элементу в наборе элементов которые мы перебираем.
Цепочки
Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.
Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение
Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки
Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.
link jQuery Migrate Plugin
We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.
There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:
The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:
link Using jQuery with a CDN
CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe. This also offers an advantage that
if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it won’t have to be re-downloaded.
jQuery’s CDN provided by StackPath
The jQuery CDN supports Subresource Integrity (SRI) which allows the browser to verify that the files being delivered have not been modified. This specification is currently being implemented by browsers. Adding the new integrity attribute will ensure your application gains this security improvement as browsers support it.
To use the jQuery CDN, just reference the file in the script tag directly from the jQuery CDN domain. You can get the complete script tag, including Subresource Integrity attribute, by visiting https://code.jquery.com and clicking on the version of the file that you want to use. Copy and paste that tag into your HTML file.
Starting with jQuery 1.9, are available on the jQuery CDN. However, as of version 1.10.0/2.1.0 the compressed jQuery no longer includes the sourcemap comment in CDN copies because it requires the uncompressed file and sourcemap file to be placed at the same location as the compressed file. If you are maintaining local copies and can control the locations all three files, you can add the sourcemap comment to the compressed file for easier debugging.
To see all available files and versions, visit https://code.jquery.com
Other CDNs
The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host ; check the site’s documentation.
Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.
- CDNJS CDN
- jsDelivr CDN
jQuery Core — All 1.x Versions
- jQuery Core 1.12.4 — uncompressed, minified
- jQuery Core 1.12.3 — uncompressed, minified
- jQuery Core 1.12.2 — uncompressed, minified
- jQuery Core 1.12.1 — uncompressed, minified
- jQuery Core 1.12.0 — uncompressed, minified
- jQuery Core 1.11.3 — uncompressed, minified
- jQuery Core 1.11.2 — uncompressed, minified
- jQuery Core 1.11.1 — uncompressed, minified
- jQuery Core 1.11.0 — uncompressed, minified
- jQuery Core 1.10.2 — uncompressed, minified
- jQuery Core 1.10.1 — uncompressed, minified
- jQuery Core 1.10.0 — uncompressed, minified
- jQuery Core 1.9.1 — uncompressed, minified
- jQuery Core 1.9.0 — uncompressed, minified
- jQuery Core 1.8.3 — uncompressed, minified
- jQuery Core 1.8.2 — uncompressed, minified
- jQuery Core 1.8.1 — uncompressed, minified
- jQuery Core 1.8.0 — uncompressed, minified
- jQuery Core 1.7.2 — uncompressed, minified
- jQuery Core 1.7.1 — uncompressed, minified
- jQuery Core 1.7.0 — uncompressed, minified
- jQuery Core 1.7.0 — uncompressed, minified
- jQuery Core 1.6.4 — uncompressed, minified
- jQuery Core 1.6.3 — uncompressed, minified
- jQuery Core 1.6.2 — uncompressed, minified
- jQuery Core 1.6.1 — uncompressed, minified
- jQuery Core 1.6.0 — uncompressed, minified
- jQuery Core 1.5.2 — uncompressed, minified
- jQuery Core 1.5.1 — uncompressed, minified
- jQuery Core 1.5.0 — uncompressed, minified
- jQuery Core 1.4.4 — uncompressed, minified
- jQuery Core 1.4.3 — uncompressed, minified
- jQuery Core 1.4.2 — uncompressed, minified
- jQuery Core 1.4.1 — uncompressed, minified
- jQuery Core 1.4.0 — uncompressed, minified
- jQuery Core 1.3.2 — uncompressed, minified, packed
- jQuery Core 1.3.1 — uncompressed, minified, packed
- jQuery Core 1.3.0 — uncompressed, minified, packed
- jQuery Core 1.2.6 — uncompressed, minified, packed
- jQuery Core 1.2.5 — uncompressed, minified, packed
- jQuery Core 1.2.4 — uncompressed, minified, packed
- jQuery Core 1.2.3 — uncompressed, minified, packed
- jQuery Core 1.2.2 — uncompressed, minified, packed
- jQuery Core 1.2.1 — uncompressed, minified, packed
- jQuery Core 1.2.0 — uncompressed, minified, packed
- jQuery Core 1.1.4 — uncompressed, packed
- jQuery Core 1.1.3 — uncompressed, packed
- jQuery Core 1.1.2 — uncompressed, packed
- jQuery Core 1.1.1 — uncompressed, packed
- jQuery Core 1.1.0 — uncompressed, packed
- jQuery Core 1.0.4 — uncompressed, packed
- jQuery Core 1.0.3 — uncompressed, packed
- jQuery Core 1.0.2 — uncompressed, packed
- jQuery Core 1.0.1 — uncompressed, packed
- jQuery Core 1.0.0 — uncompressed, packed
Обработка событий с помощью методов jQuery
Перед тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить. Узнать о том, как найти нужные элементы на странице можно в статье jQuery — Выбор элементов.
В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций и , а также кратких записей .
// функция on .on(events,handler); // функция one .one(events,handler); // events - событие или список событий через пробел, при наступлении которых необходимо выполнить обработчик (handler) // handler - функция (обработчик события) // краткая запись функции on .event(handler); // event - название события (можно использовать для обработки только тех событий, для которых в jQuery создана такая краткая запись)
Функция отличается от только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции событие для всех элементов с классом :
// использование в качестве обработчика анонимной функции
$('.btn').on('click', function() {
// действия, которые будут выполнены при наступлении события...
console.log($(this).text());
});
// использование обычной функции в качестве обработчика
var myFunction = function() {
console.log($(this).text());
}
$('.btn').on('click', myFunction);
Вышеприведённый код, записанный с использованием короткой записи функции :
$('.btn').click(function() {
// действия, которые будут выполнены при наступлении события...
console.log($(this).text());
});
Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта в обработчик события осуществляется всегда посредством первого аргумента.
$('#demo').on('click', function(e){
// e – объект Event, содержащий дополнительную информацию о произошедшем событии
// часто используемые свойства объекта Event
e.preventDefault(); //отменить выполнение действия по умолчанию
e.stopPropagation(); //остановить дальнейшее всплытие события
// e.type – получить тип события
// e.target – ссылка на элемент, на котором произошло событие
// e.currentTarget - ссылка на текущий элемент (для которого сработал обработчик). Это свойство, как правило, равно функции this.
// e.currentTarget === this
// e.which – код клавиши (для мыши), код кнопки или символа (для клавиатуры)
//e.pageX, e.pageY – координаты курсора, относительно левого верхнего угла документа
});
Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Например:
// событие click в пространстве имён first
$('#demo').on('click.first',function(){
console.log('1 обработчик события click');
});
// событие click в пространстве имён second
$('#demo').on('click.second',function(){
console.log('2 обработчик события click');
});
Пространство имён — это очень удобная вещь. Она используется, например, когда вам необходимо вызвать не все события, а только с определённым именем.
// вызвать событие click в пространстве имён first
$('#demo').trigger('click.first');
// вызвать событие click в пространстве имён second
$('#demo').trigger('click.second');
Также с его помощью очень просто удалять определённые события:
//удалить обработчики события click в пространстве имён first
$('#demo').off('click.first');
//удалить обработчики события click в пространстве имён second
$('#demo').off('click.second');
Описание и примеры использования функций и рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
При необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции ). Доступ к переданным данным внутри обработчика осуществляется через объект .
Осуществляется это так (пример):
<div id="content"></div>
<button id="showContent1">Показать контент 1</button>
<button id="showContent2">Показать контент 2</button>
...
<script>
$('#showContent1').on('click', {title:'Заголовок 1', content: 'Содержимое 1...'}, function(e){
var output = '<b>'+e.data.title+': </b>' + e.data.content;
$('#content').html(output);
});
$('#showContent2').on('click', {title:'Заголовок 2', content: 'Содержимое 2...'}, function(e){
var output = '<b>'+e.data.title+': </b>' + e.data.content;
$('#content').html(output);
});
</script>
Почему $, а не что-то ещё?
Библиотека jQuery предоставляет функцию jQuery, которая позволяет вам выбирать элементы с помощью селекторов CSS.
Конечно, если вы уже видели любой jQuery-код, то, вероятно, больше привыкли к чему-то вроде этого:
Как обсуждалось в разделе Основы JavaScript, корректные имена в JavaScript могут быть достаточно произвольны, если только они не начинаются с цифры и не включают в себя дефис. Таким образом, $ в коде просто более короткое и удобное имя для функции jQuery. На деле в конце исходного кода jQuery вы найдёте:
При вызове функции $() и передаче в неё селектора вы создаёте новый объект jQuery. Конечно, в JavaScript функции тоже объекты, это означает что у $ (и jQuery, естественно) также есть свойства и методы. Например, вы можете обратиться к свойству $.support за информацией о том, что поддерживает текущий браузер, а с помощью метода $.ajax сделать запрос через AJAX.
Далее в руководстве мы будем использовать $ вместо jQuery для краткости
Обратите внимание, что если ваша страница содержит более одной библиотеки JavaScript, то $ может применяться другой библиотекой и это может привести к тому, что jQuery перестанет работать. Если вы столкнулись с подобным, то должны рассмотреть использование jQuery.noConflict перед загрузкой других библиотек
Plain JavaScript ready() Alternative
For modern browsers, and IE9+, you can listen for the event:
But, note that the callback will not be executed if the event has already fired. To make sure the callback is always run, jQuery checks the of a document () and, if it’s already , executes the callback immediately:
You could also include the domReady library, which has already implemented this solution.
Older versions of Internet Explorer
For IE versions less than or equal 8, you could use the event to detect the of a document:
Alternatively you could use the load event, like jQuery does, as this will work in any browser. This also results in a time delay, as it’ll wait for all assets to be loaded. Note that you’ll also have to check the in this solution, like explained above, to make sure the callback will still be executed even if the event has already fired.
Описание метода jQuery.ready().
В JavaScript существует событие load, которое выполняется после разбора HTML-документа, когда загружены все изображения. в большинстве случаев скрипты могут быть запущены, как только DOM-дерево полностью построено
Обработчики переданные в jQuery.ready() будут выполнены именно после построения DOM-дерева, так что это лучшее место для выполнения инициализации собственного функционала. Для сктриптов использующих значения CSS-свойств важно подулючать CSS-файлы перед выполнением скриптов или указывать CSS-свойства в конкретные элементы
В случае когда код зависит от загрузки дополнительных данных (например, нужны размеры изоюражения), то код следует помещать в обработчики события load.
Важно:
Как правило метод jQuery.ready() не совместим с атрибутом onload элемента <body>. Если необходимо использовать событие load или не используют jQuery.ready() или используют jQuery.load() для присоединения обработчиков для события load окна или или другого элемента (например изображения).
Ожидание готовности DOM-модели
Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:
В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.
Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.
Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:
Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:
Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.
Использование альтернативной нотации
При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:
Задержка срабатывания события ready
Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:
Первой инструкцией в этом сценарии является вызов метода holdReady(). В качестве аргумента ему передается значение true, указывающее на необходимость задержки срабатывания события ready. Далее мы определяем функцию, которая должна быть выполнена при срабатывании события ready (она содержит тот же набор инструкций, который использовался в предыдущей статье для изменения непрозрачности изображений, но оформленный в виде функции).
Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:
Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.
jQuery Migrate — All Versions
- jQuery Migrate 3.3.2 — uncompressed, minified
- jQuery Migrate 3.3.1 — uncompressed, minified
- jQuery Migrate 3.3.0 — uncompressed, minified
- jQuery Migrate 3.2.0 — uncompressed, minified
- jQuery Migrate 3.1.0 — uncompressed, minified
- jQuery Migrate 3.0.1 — uncompressed, minified
- jQuery Migrate 3.0.0 — uncompressed, minified
- jQuery Migrate 1.4.1 — uncompressed, minified
- jQuery Migrate 1.4.0 — uncompressed, minified
- jQuery Migrate 1.3.0 — uncompressed, minified
- jQuery Migrate 1.2.1 — uncompressed, minified
- jQuery Migrate 1.2.0 — uncompressed, minified
- jQuery Migrate 1.1.1 — uncompressed, minified
- jQuery Migrate 1.1.0 — uncompressed, minified
- jQuery Migrate 1.0.0 — uncompressed, minified
link Downloading jQuery
Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.
You can also download a sourcemap file for use when debugging with a compressed file.
The map file is not required for users to run jQuery, it just improves the developer’s debugger experience.
As of jQuery 1.11.0/2.1.0 the comment is not included in the compressed file.
To locally download these files, right-click the link and select «Save as…» from the menu.
jQuery
For help when upgrading jQuery, please see the upgrade guide most relevant to your version.
We also recommend using the jQuery Migrate plugin.
You can also use the slim build, which excludes the ajax and effects modules:
jQuery Core — All 3.x Versions
- jQuery Core 3.6.0 — uncompressed, minified, slim, slim minified
- jQuery Core 3.5.1 — uncompressed, minified, slim, slim minified
- jQuery Core 3.5.0 — uncompressed, minified, slim, slim minified
- jQuery Core 3.4.1 — uncompressed, minified, slim, slim minified
- jQuery Core 3.4.0 — uncompressed, minified, slim, slim minified
- jQuery Core 3.3.1 — uncompressed, minified, slim, slim minified
- jQuery Core 3.3.0 — uncompressed, minified, slim, slim minified
- jQuery Core 3.2.1 — uncompressed, minified, slim, slim minified
- jQuery Core 3.2.0 — uncompressed, minified, slim, slim minified
- jQuery Core 3.1.1 — uncompressed, minified, slim, slim minified
- jQuery Core 3.1.0 — uncompressed, minified, slim, slim minified
- jQuery Core 3.0.0 — uncompressed, minified, slim, slim minified
link About the Code
jQuery is provided under the MIT license.
The code is hosted and developed in the jQuery GitHub repository. If you’ve spotted some areas of code that could be improved, please feel free to discuss it on the Developing jQuery Core Forum. If you’d like to participate in developing jQuery, peruse our contributor site for more information.
To find and download plugins developed by jQuery contributors, please visit the Plugins site. Plugin authors are responsible for maintenance of their plugins. Feedback on plugins should be directed to the plugin author, not the jQuery team.
Build from Git
Note: To just use the latest work-in-progress version of jQuery, please try the jQuery Pre-Release Build described above.
All source code is kept under Git revision control, which you can browse online. The repository’s README has more information on building and testing your own jQuery, as well as instructions on creating a custom build that excludes some APIs to reduce file size.
If you have access to Git, you can connect to the repository here:
|
1 |
You can also check out and build a specific version of jQuery from GitHub:
|
1 2 |
The README file for a specific version will have instructions for building that version, as the process has changed over time.
Добавление событий к динамически созданным объектам
Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции :
$(document).on(eventName, selector, handler); // document или любой другой существующий родительский элемент // eventName - имя события // selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события // handler - обработчик события
Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция может программно отобрать среди элементов (элемента, который вызвал это событие () и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.
Например, добавим событие к элементу, которого ещё нет на странице:
<button id="addButton" type="button">Добавить кнопку</button>
<script>
// при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку
$('#addButton').on('click', function(e) {
$('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>');
});
// добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице
$(document).on('click','.deleteMe', function() {
$(this).remove();
});
</script>
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
$(document).on('click','#comment a',function(e) {
if(!(location.hostname === this.hostname || !this.hostname.length)) {
e.preventDefault();
location.href='away?link='+encodeURIComponent($(this).attr('href'));
}
});
