Как не использовать JavaScript в атрибутах событий элементов, но все равно загружать через AJAX

Question

Я сейчас загружаю контент HTMl через AJAX.

У меня есть код для вещей на разных элементах onclick атрибуты (и другие атрибуты событий).

Это работает, но я начинаю обнаруживать, что код становится довольно большим и трудным для чтения. Я также читал, что считается плохой практикой иметь встроенный код события, подобный этому, и что я действительно должен сделать это с помощью element.onclick = foobar и определить foobar где-то еще.

Я понимаю, что со статической страницей это довольно легко сделать, просто поместите тег скрипта внизу страницы, и после загрузки страницы он будет выполнен. Затем можно прикрепить любое и все события по мере необходимости.

Но как я могу получить такой эффект при загрузке контента через AJAX. Существует также небольшой случай, когда загружаемый контент может очень зависеть от того, что находится в базе данных, иногда некоторые разделы HTML, такие как таблицы результатов, даже не будут отображаться, будет что-то еще полностью.

Я могу опубликовать некоторые примеры кода, если они понадобятся любому телу, но я понятия не имею, какие вещи помогут людям в этом. Я укажу, что я уже использую Jquery, так что если у него есть несколько полезных маленьких функций, которые были бы довольно приятными!

Небольшой пример кода

Это пример кода, который загружается с помощью запроса AJAX

<input type="submit" name="login" value="login" onclick="
if(check_login(this.form)){
  Window_manager.windows[1].load_xml('login/display.php?username=' + this.form.username.value + '&amp;password=' + this.form.password.value);
} else {
  return false;
}">

Я знаю, что это небольшая выборка, но именно об этом я и говорю. Как я могу прикрепить этот код при загрузке контента?

Answer 1

jQuery .live () метод, вероятно, то, что вы ищете. Он будет прикреплять событие click к вновь созданным HTML-элементам, поэтому вам не нужно вызывать ваш .click () при каждой перезагрузке панели обновления.

Answer 2

Вы можете получить более чистый HTML-код, сделав привязки событий в javascript. Все, что вам нужно, - это способы идентификации объектов DOM для ваших элементов HTML, таких как идентификаторы.

Если у вас есть ссылка с идентификатором «fooLink», вы можете сделать это в своем JavaScript:

docuemnt.getElementById('foo').onclick = function () {
   //do your stuff here
}

Это будет иметь тот же эффект, что и привязка события в атрибуте "onclick", если элемент link в вашем HTML-коде.

Таким образом, вы можете создавать более чистый HTML, который легче читать и поддерживать.