Как привязать клик по ссылкам в динамике c загрузки контента?

Question

У меня странная проблема. Предположим, у нас есть страница HTML со следующим кодом:

<div class="description">
        <a href='#' class='oldkeenload btn btn-apply' data-subject='1' data-subject2='3'><i class="fa fa-cloud-download" aria-hidden="true"></i> Загрузить материал</a>
</div>

Когда пользователь нажимает кнопку href с классом oldkeenload, я делаю следующий код js:

$(".oldkeenload").click(function () {
    // console.log("Clicked");
    var topic=$(this).data('subject');
    var kcode=$(this).data('subject2');

    var datastring = '/app/server.php?oldkeen=' + kcode + '&topicid=' + topic;

    // console.log(datastring);

    // var parentTag = $( this ).parent().get( 0 ).tagName;
    // console.log("Parent tag: " + parentTag);

    $(this).parent(".description").load(datastring);

    return false;
});

Он просто загружает ответ от сервера в div "description". Я делаю это, чтобы не загружать все материалы, позволяя пользователю загружать то, что ему нужно, в одной конкретной c категории. Пользователь видит вводную часть материала, нажимает кнопку загрузки, содержимое загружается.

Однако, когда вы загружаете этот метод, новые ссылки в загруженном содержимом не загружают новое содержимое. Когда я нажимаю ссылку, ничего не происходит.

Есть идеи, как это сделать в JS без сценариев на стороне сервера?

Answer 1

Функция jQuery .load () принимает дополнительный обратный вызов. Он будет запущен после завершения загрузки. Вы можете снова привязать функцию click после обновления DOM с помощью .load.

var loadData = function () {
    // console.log("Clicked");
    var topic=$(this).data('subject');
    var kcode=$(this).data('subject2');

    var datastring = '/app/server.php?oldkeen=' + kcode + '&topicid=' + topic;

    // console.log(datastring);

    // var parentTag = $( this ).parent().get( 0 ).tagName;
    // console.log("Parent tag: " + parentTag);
    var $container = $(this).parent(".description");
    $container.load(datastring, function () {
        $(".oldkeenload", $container).click(loadData);
    });

    return false;
}
$(".oldkeenload").click(loadData);