JQuery / AJAX: функции, использующие идентификаторы из внешнего контента

Question

Идея

У меня есть главная страница PHP, которая загружает содержимое в DIV из внешнего файла, используя JQuery и AJAX.

Страница работает следующим образом:

1. На главной странице есть список ссылок, при нажатии на которые AJAX загружает на страницу внешний DIV.
2. Этот новый DIV, затем имеет другой список ссылок, при нажатии AJAX снова загружает другой внешний DIV
3. В настоящее время существует 3 DIV, содержащие списки ссылок, этот процесс можно повторять снова и снова.

Каждая из ссылок в DIV имеет параметры, которые фильтруют результаты для следующего DIV.

<div id="destination_Div01">
  <a href="?Div01=1">Link</a>
</div>

проблема

$(document).ready(function() {                         
    $('#Destination_Div01 a').click(function(){
        $("#Destination_Div02").load("External.php"+$(this).attr('href')+" #Target_Div02");
        return false;
    });

    $('#Destination_Div02 a').click(function(){
        $("#Destination_Div03").load("External.php"+$(this).attr('href')+" #Target_Div03");
        return false;
    });
});

Когда страница загружается впервые, существует только один DIV, когда загружается новый DIV, я не думаю, что JQuery замечает, что теперь есть новый DIV со ссылками.

Итак, теперь, когда нажата ссылка в новом Destination_Div02, JQuery не распознает связанную функцию, и браузер продолжает загружать URL-адрес ссылки. Вместо этого он должен использовать AJAX для передачи параметров URL ссылок во внешний файл PHP, фильтровать набор записей и возвращать новый DIV.

Как заставить JQuery работать с вновь сгенерированными ссылками?

---

Ответ

Кредит "great_llama" Убедитесь, что у вас JQuery 1.3+ и измените код на $ ('# Destination_Div01 a'). Live ("click", function () {

$(document).ready(function() {                                             
    $('#Destination_Div01 a').live("click", function(){
        $("#Destination_Div02").load("External.php"+$(this).attr('href')+" #Target_Div02");
        return false;
    });

    $('#Destination_Div02 a').live("click", function(){
        $("#Destination_Div03").load("External.php"+$(this).attr('href')+" #Target_Div03");
        return false;
    });
});

Answer 1

В jQuery 1.3 появилась возможность привязки к будущим соответствующим элементам, используя метод .live .

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

Answer 2

поместите ваш последующий $ ('div'). Click () внутри функции обратного вызова для каждого предыдущего клика:

$('div1').click(function(){
    $('div2').load(link, data, function(){
        $('div2').click(function(){
            $('div3').load(link, data, function(){})
        })
    })
})

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

$('div1').click(function(){
    $('div2').load(link, data, function(){
        some_function();
    }
});

function some_function(){
    $('.class').click(function(){
        //logic here
    }
});

Answer 3

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

$('#Destination_Div02 a').click(function(){
    $("#Destination_Div03")
    .load("External.php"+$(this).attr('href')+" #Target_Div03", null, function() {
         $(this).click( ///your click code again/// );
         //according to the docs this is the element you just loaded
    );
    return false;
});