Javascript 如何在img点击时在电子书（使用turn.js创建）的某些特定页面上添加弹出式播放器？

如果我没有指定页码，Pop player可以正常工作。但是如果我指定页码并将弹出窗口添加到该页面…则无法正常工作。我还在该电子书中指定了放大和缩小功能…当电子书加载和翻页时，在某些页面上指定的Pop player无法正常工作（即）在img上，单击没有响应，但当我放大和缩小时，它工作正常…这是因为我还在jquery中的缩小功能上指定了弹出代码..请解决我突出显示的问题

这就是我在电子书中加载页面的方式

  if (book.turn('addPage', element, page)) {

        // Add the initial HTML
        // It will contain a loader indicator and a gradient
        element.html('<div class="gradient"></div><div class="loader"></div>');

        // Load the page
        if(page==1){
            loadPageGif(page, element);

            }

        else if(page==16){
            loadPageYoutube2(page, element);}
        else{
            loadPage(page, element);

            }
    }

if（book.turn（'addPage'，元素，页面））{
//添加初始HTML
//它将包含一个装载指示器和一个坡度
html（“”）；
//加载页面
如果（第==1页）{
loadPageGif（页面，元素）；
}
否则如果（第==16页）{
loadPageYoutube2（页面，元素）；}
否则{
加载页面（页面，元素）；
}
}

在加载页面功能中，我加载gif图像。在加载页面YouTube 2中，我为特定页面添加了弹出代码

function loadPageYoutube2(page, pageElement) {

    // $('#thumbIndex').hide();
    var img = $('<img />');

    img.mousedown(function(e) {
        e.preventDefault();
    });

    img.load(function() {

        // Set the size
        $(this).css({width: '100%', height: '100%'});

        // Add the image to the page after loaded

        $(this).appendTo(pageElement);

        // Remove the loader indicator

        pageElement.find('.loader').remove();
    });

    // Load the page

    img.attr('src', 'pages/' +  page + '.gif');

    //loadRegions(page, pageElement);



    if(page==16){
        var youtube = $('<img class="img" src="http://img.youtube.com/vi/BLQFAUvwWrk/0.jpg" width="100" height="100" style=" position: absolute ; top:360px; left:50px; right:50px; margin-left: auto; margin-right: auto;  "  />');

    youtube.appendTo(pageElement);
    }
        pageElement.find('.loader').remove();

    $('.img').magnificPopup({
  items: {
         src: 'http://www.youtube.com/watch?v=7eo8XpT4CmM'
     },
  type: 'iframe',
  iframe: {
            markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                    '</div>', 
        patterns: {
            youtube: {
                  index: 'youtube.com/', 
                  id: 'v=', 
                  src: '//www.youtube.com/embed/%id%?autoplay=1' 
                }
             },
             srcAction: 'iframe_src', 
     }
});


}   

函数加载PageYouTube2（页面，页面元素）{
//$（“#拇指索引”）.hide（）；
var img=$（''）；
appendTo（pageElement）；
}
pageElement.find（'.loader'）.remove（）；
$（'.img'）.magnificPopup({
项目：{
src:'http://www.youtube.com/watch?v=7eo8XpT4CmM'
},
键入：“iframe”，
iframe：{
标记：“”+
''+
''+
'', 
模式：{
youtube：{
索引：“youtube.com/”，
id:'v='，
src:“//www.youtube.com/embed/%id%？自动播放=1”
}
},
srcAction:'iframe_src'，
}
});
}   

在这里，当我点击img时，什么都没有发生……请帮我解决这个问题