Функция Яваскрипта (ДжейКвери) не срабатывает

[Булат Азат улы]

Всем здравствуйте. На сайте хочу сделать так, чтобы при клике по ссылке всплывал блок с изображениями, и при нажатии на изображение всплывал еще один блок с увеличенным изображением.
Отдельно скрипт с увеличением изображения работает, и всплывающий блок с изображениями нормально открывается. А вот при щелчке в этом блоке на изображение ничего не происходит.
Для удобства я перевел свой сайт на тестовый сервер в сети, вот на него ссылка: _http://saitlartiksheru.xyz/madrasa_turynda.php

Там чуть ниже есть рисунки - попробуйте пощелкать на них - все работает. Еще ниже, где ПДФ-документы, в первом списке (Гыйльми киңәшмәләр (Шура) кагыйдәнамәсе) есть ссылка без изображения. Это и есть тот блок. Но вот там уже изображения не работают, хотя скрипт тот же.

Помогите пожалуйста, чего я делаю не так?

Вот скрипт для увеличения изображений:

Код:

$(".rasemUrta").click(function(){    // Клик на маленькое изображение
          var img = $(this);    // Берем изображение
        var src = img.attr('src'); // Отбираем путь
        $("body").append("<div class='popup'>"+ // Добавляем в основу сайта всплывающий блок
                         "<div class='popup_bg'></div>"+ // Блок для затемненного фона
                         "<img src="+src+" class='popup_img' />"+ // Увеличенное изображение
                         "</div>");
        $(".popup").fadeIn(800); // Выводим изображение
        $(".popup_bg").click(function(){    // Клик на затемненный фон      
            $(".popup").fadeOut(800);    // Убираем изображение
            setTimeout(function() {    // Таймер
              $(".popup").remove(); // Удаляем блок
            }, 800);
        });
        $(".popup_img").click(function(){    // Клик на изображение      
            $(".popup").fadeOut(800);    //Убираем изображение
            setTimeout(function() {    // Таймер
              $(".popup").remove(); // Удаляем блок
            }, 800);
        });
    });

И вот скрипт для блока с изображениями:

Код:

$("#shuraKagyidanamase").click(function(){    // Клик на ссылку
        $("body").append("<div id='osBlok'><div id='osBlokBg'></div><div id='rasemUrtaBit'>"+
            "<img class='rasemUrta' src='documentlar/shura_kagyidanamase/1.jpg' width='200' height='280' alt='1-нче бит' title='1-нче бит'>"+
            "<img class='rasemUrta' src='documentlar/shura_kagyidanamase/1.jpg' width='200' height='280' alt='2-нче бит' title='2-нче бит'>"+
            "</div></div>");
        $("#osBlok").fadeIn(800); // Выводим блок для изображений
        $("#osBlokBg").click(function(){    // Клик на затемненный фон      
            $("#osBlok").fadeOut(800);    // Убираем блок
            setTimeout(function() {    // Таймер
              $("#osBlok").remove(); // Удаляем блок
            }, 800);
        });
    });

[Admin]

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

Вам лучше воспользоваться обработчиком события .delegate()

Замените:

Код:

$(".rasemUrta").click(function(){    // Клик на маленькое изображение

на:

Код:

$(document).delegate(".rasemUrta", "click", function() {    // Клик на маленькое изображение

[Булат Азат улы]

Спасибо большое, все заработало!!!