Контент, извлекаемый через jQuery AJAX, не связан с предыдущими функциями

Question

Я использую функцию jQuery .load(), чтобы получить данные для заполнения div. Содержимое, которое я добавляю, имеет CSS-селекторы, которые должны соответствовать функциям щелчков jQuery, которые я написал. Однако, когда я загружаю данные, хотя правильные селекторы CSS есть, когда я нажимаю на области, которые должны вызвать ответ от jQuery, ничего не происходит.

Нужно ли делать какую-то перезагрузку?

Вот код, который я получил для jQuery AJAX:

$(document).ready(function() {
// AJAX functionality for drupal nodes
$(".ajax_node").click(function() {
    var ajax_src = $(this).attr("href"); // we're gonna load the href

    // empty target div and load in content
    // the space in the string before the #id is necessary
    $("#ajax_area").empty().load(ajax_src + " #ajax_wrapper");
    return false; // stops the link from following through
});

// General AJAX functionality
$(".ajax").click(function() {
    var ajax_src = $(this).attr("href");
    $("#ajax_area").empty().load(ajax_src);
    return false;
});
});

Answer 1

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

Answer 2

Вместо этого формата:

$(".ajax_node").click(function() {

Используйте .live() для текущих и будущих элементов, например:

$(".ajax_node").live('click', function() {

Почему: .live() прослушивает всплывающее событие в корне DOM или document. Это ограничен одним обработчиком событий ... не имеет значения, когда был добавлен элемент, они все всплывают click, когда щелчок попадает туда: он проверяет селектор, если он совпадает, запускает обработчик.

Почему ваш текущий метод не работает: он находит все элементы, соответствующие этому селектору в то время и связывает обработчик ... новых элементов нет, так что не поймите это обработчик. У вас есть 2 варианта для решения этой проблемы: либо используйте .live(), который работает по-другому, как описано выше, либо повторно привяжите обработчик к этому селектору в содержимом запроса, например:

function callback(data) { //your success callback, e.g. .load(url, callback)
  $(".ajax_node", data).click(myFunction);
}

В вашем случае, я думаю, .live() намного проще, вы обычно делаете второе с виджетами и тому подобными, а не только с обработчиками событий ... но все, что плавает в вашей лодке.