Javascript JQuery在模式内部不工作 使用的脚本

PHP脚本

<?php
    $files = glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");
    echo '<div class="SwitchPages"><div class="WrapPages">'; //First tab
    $t = 0;
    for ($i=0; $i<count($files); $i++)
    {
        $root = "http://www.rafflebananza.com/";
        $imagePath = str_replace("../", "",$files[$i]);
        $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $imagePath);
        $imageName = str_replace("Desktop/IMG/BananzaNews/Thumbs/", "", $withoutExt);

        if( $i % 8 == 0 ) {
            $t = $t + 1;
            echo '<div id="Page_'.$t.'_Content" class="Pages">'; //hidden class
        }

        echo '<div class="UploadedImgs">
                <div class="ImgName">'.$imageName.'</div>
                <div class="IMG">
                    <img src="'.$root.$imagePath.'" alt="'.$imageName.'" />
                </div>
            </div>';

        if( $i > 0 && $i % 7 == 0 && $i != count($files) - 1 ) {
            echo '</div>';
        }
        if( $i % 7 == 0 && $i == count($files) - 1 ) {
            echo '</div>';
        } else if($i == count($files) - 1 && $i % 7 != 0 ) {
            echo "</div></div>";
        }
    }
    $t = 1;
    echo '<div class="TabSwitcher">';
    for ($i=0; $i<count($files); $i++)
    {
        if( $i % 8 == 0 ) {
            echo '<div class="Tab" id="Page_'.$t.'">'.$t.'</div>';
            $t = $t + 1;
        }
    }
    echo '</div></div>';
?>

(function($){

    // Defining our jQuery plugin
    $.fn.modal_box = function(prop){

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [37, 38, 39, 40];

        function preventDefault(e) {
          e = e || window.event;
          if (e.preventDefault)
              e.preventDefault();
          e.returnValue = false;  
        }

        function keydown(e) {
            for (var i = keys.length; i--;) {
                if (e.keyCode === keys[i]) {
                    preventDefault(e);
                    return;
                }
            }
        }

        function wheel(e) {
          preventDefault(e);
        }

        function disable_scroll() {
          if (window.addEventListener) {
              window.addEventListener('DOMMouseScroll', wheel, false);
          }
          window.onmousewheel = document.onmousewheel = wheel;
          document.onkeydown = keydown;
        }

        function enable_scroll() {
            if (window.removeEventListener) {
                window.removeEventListener('DOMMouseScroll', wheel, false);
            }
            window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
        }

        var options = $.extend({
            height : "500",
            width : "800",
        },prop);

        var from_top;
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();

        return this.click(function(e){
            scrollbar = $(window).scrollTop();
            from_top = scrollbar + ((windowHeight / 2) -250);
            e.preventDefault();
            disable_scroll();
            add_block_page();
            add_popup_box();
            add_styles();
            $('.modal_box').fadeIn();
        });

         function add_styles(){         
            $('.modal_box').css({ 
                'position':'absolute', 
                'left':(windowWidth /2)-400 + 'px',
                'top': from_top,
                'display':'none',
                'margin':'10px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2', 
                'z-index':'50',
                'overflow':'hidden'
            });
            $('.modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
            /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.inner_modal_box').css({
                'background-color':'#fff',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
            });
        }

         function add_block_page(){
            var block_page = $('<div class="block_page"></div>');
            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="modal_box"><a href="#" class="modal_close"></a><div class="inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.block_page');

             $('.modal_close').click(function(){
                event.preventDefault();
                $(this).parent().fadeOut().remove();
                $('.block_page').fadeOut().remove();                 
             });
        }

        return this;
    };

})(jQuery);

问题 请不要混淆，这不是一个PHP问题。我的PHP创建内容，如果它不在我的模式框中，它将完全工作，但是如果脚本在我的模式框中，它将不工作，我的意思是它确实显示和诸如此类，只是切换选项卡和诸如此类的功能将不工作

大概是因为加载时我的模式不可见，所以我可能需要知道如何在隐藏的东西上或在调用它时执行所有JQuery脚本

完整模式脚本

<?php
    $files = glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");
    echo '<div class="SwitchPages"><div class="WrapPages">'; //First tab
    $t = 0;
    for ($i=0; $i<count($files); $i++)
    {
        $root = "http://www.rafflebananza.com/";
        $imagePath = str_replace("../", "",$files[$i]);
        $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $imagePath);
        $imageName = str_replace("Desktop/IMG/BananzaNews/Thumbs/", "", $withoutExt);

        if( $i % 8 == 0 ) {
            $t = $t + 1;
            echo '<div id="Page_'.$t.'_Content" class="Pages">'; //hidden class
        }

        echo '<div class="UploadedImgs">
                <div class="ImgName">'.$imageName.'</div>
                <div class="IMG">
                    <img src="'.$root.$imagePath.'" alt="'.$imageName.'" />
                </div>
            </div>';

        if( $i > 0 && $i % 7 == 0 && $i != count($files) - 1 ) {
            echo '</div>';
        }
        if( $i % 7 == 0 && $i == count($files) - 1 ) {
            echo '</div>';
        } else if($i == count($files) - 1 && $i % 7 != 0 ) {
            echo "</div></div>";
        }
    }
    $t = 1;
    echo '<div class="TabSwitcher">';
    for ($i=0; $i<count($files); $i++)
    {
        if( $i % 8 == 0 ) {
            echo '<div class="Tab" id="Page_'.$t.'">'.$t.'</div>';
            $t = $t + 1;
        }
    }
    echo '</div></div>';
?>

(function($){

    // Defining our jQuery plugin
    $.fn.modal_box = function(prop){

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [37, 38, 39, 40];

        function preventDefault(e) {
          e = e || window.event;
          if (e.preventDefault)
              e.preventDefault();
          e.returnValue = false;  
        }

        function keydown(e) {
            for (var i = keys.length; i--;) {
                if (e.keyCode === keys[i]) {
                    preventDefault(e);
                    return;
                }
            }
        }

        function wheel(e) {
          preventDefault(e);
        }

        function disable_scroll() {
          if (window.addEventListener) {
              window.addEventListener('DOMMouseScroll', wheel, false);
          }
          window.onmousewheel = document.onmousewheel = wheel;
          document.onkeydown = keydown;
        }

        function enable_scroll() {
            if (window.removeEventListener) {
                window.removeEventListener('DOMMouseScroll', wheel, false);
            }
            window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
        }

        var options = $.extend({
            height : "500",
            width : "800",
        },prop);

        var from_top;
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();

        return this.click(function(e){
            scrollbar = $(window).scrollTop();
            from_top = scrollbar + ((windowHeight / 2) -250);
            e.preventDefault();
            disable_scroll();
            add_block_page();
            add_popup_box();
            add_styles();
            $('.modal_box').fadeIn();
        });

         function add_styles(){         
            $('.modal_box').css({ 
                'position':'absolute', 
                'left':(windowWidth /2)-400 + 'px',
                'top': from_top,
                'display':'none',
                'margin':'10px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2', 
                'z-index':'50',
                'overflow':'hidden'
            });
            $('.modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
            /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.inner_modal_box').css({
                'background-color':'#fff',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
            });
        }

         function add_block_page(){
            var block_page = $('<div class="block_page"></div>');
            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="modal_box"><a href="#" class="modal_close"></a><div class="inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.block_page');

             $('.modal_close').click(function(){
                event.preventDefault();
                $(this).parent().fadeOut().remove();
                $('.block_page').fadeOut().remove();                 
             });
        }

        return this;
    };

})(jQuery);

（函数（$）{
//定义jQuery插件
$.fn.modal_box=功能（道具）{
//左：37，上：38，右：39，下：40，
//空格键：32，向上翻页：33，向下翻页：34，结束：35，起始：36
var键=[37,38,39,40]；
功能默认值（e）{
e=e | | window.event；
如果（如默认）
e、 预防默认值（）；
e、 returnValue=false；
}
功能键控（e）{
对于（var i=keys.length；i--；）{
如果（e.keyCode===键[i]）{
防止违约（e）；
返回；
}
}
}
功能轮（e）{
防止违约（e）；
}
功能禁用_滚动（）{
if（window.addEventListener）{
window.addEventListener（'DOMMouseScroll'，wheel，false）；
}
window.onmouseheel=document.onmouseheel=wheel；
document.onkeydown=keydown；
}
功能启用_滚动（）{
if（window.removeEventListener）{
window.removeEventListener（'DOMMouseScroll'，wheel，false）；
}
window.onmouseheel=document.onmouseheel=document.onkeydown=null；
}
变量选项=$.extend({
高度：“500”，
宽度：“800”，
}，道具）；
来自顶部的var；
var windowHeight=$（window.height（）；
var windowWidth=$（window.width（）；
返回此项。单击（函数（e）{
滚动条=$（窗口）.scrollTop（）；
from_top=滚动条+（（窗口高度/2）-250）；
e、 预防默认值（）；
禁用_滚动（）；
添加块页面（）；
添加弹出框（）；
添加_样式（）；
$（'.modal_box'）.fadeIn（）；
});
函数add_styles（）{
$（'.modal_box'）.css（{
'位置'：'绝对'，
“左”：（窗宽/2）-400+像素，
“顶部”：从顶部开始，
“显示”：“无”，
“边距”：“10px”，
“边框”：“1px实心#fff”，
“盒子阴影”：“0px 2px 7px#292929”，
“-moz盒阴影”：“0px 2px 7px#292929”，
“-webkit盒阴影”：“0px 2px 7px#292929”，
“边界半径”：“10px”，
“-moz边界半径”：“10px”，
“-webkit边界半径”：“10px”，
“背景”：“背景”，
‘z指数’：‘50’，
“溢出”：“隐藏”
});
$（'.modal_close'）.css({
'位置'：'相对'，
'顶部'：'-25px'，
‘左’：‘20px’，
‘float’：‘right’，
“显示”：“块”，
“高度”：“50px”，
“宽度”：“50px”，
'背景'：'url（images/close.png）不重复'，
});
/*块页覆盖*/
var pageHeight=$（文档）.height（）；
var pageWidth=$（窗口）.width（）；
$（'.block_page'）.css({
'位置'：'绝对'，
“顶部”：“0”，
“左”：“0”，
“背景色”：“rgba（0,0,0,0.6）”，
“高度”：页面高度，
“宽度”：页面宽度，
“z指数”：“10”
});
$（'.inner_modal_box'）.css({
“背景色”：“fff”，
“高度”：options.height+“px”，
“宽度”：options.width+“px”，
“填充”：“10px”，
“边距”：“15px”，
“边界半径”：“10px”，
“-moz边界半径”：“10px”，
“-webkit边界半径”：“10px”，
});
}
函数添加\块\页（）{
var block_page=$（''）；
$（块_页）.appendTo（'body'）；
}
函数添加\弹出\框（）{
var pop_up=$（''+options.title+''+options.description+'
'）；
$（弹出）.appendTo（'.block_page'）；
$（'.modal_close'）。单击（函数（）{
event.preventDefault（）；
$（this.parent（）.fadeOut（）.remove（）；
$（'.block_page'）.fadeOut（）.remove（）；
});
}
归还这个；
};
})（jQuery）；

JSFiddle

以下函数

$('.TabSwitcher .Tab').click(function() {..

不适用于模式，因为只有在加载页面时才能将事件附加（至少像这样）到DOM中的实际元素，并且

.Tabswitcher

是稍后附加到主体的模式的一部分。
您可以使用

on（）

将事件从已在DOM中的父元素委托给以后添加的

.Tab

元素，如下所示：

$(document).on("click", $('.TabSwitcher .Tab'), function(){...});

可以使用DOM中已有的任何父元素来委托事件，而不是

$（document）

作为参考，您可以查看

“直接和委托事件”一节中的相关部分：

事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在

---

你有JSFIDLE让我们试试吗？这是太多的代码要求我们去挖掘。你的PHP代码应该不重要。请出示