JQuery 在模态内不起作用
JQuery not working inside modal
使用的脚本
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>';
?>
单击显示...
$('.modal_2').modal_box({
title:'Second Title Box',
description:'<?php $a=glob("../Desktop/IMG/BananzaNews/Thumbs/*.*");echo '<div class="SwitchPages"><div class="WrapPages">';$b=0;for($c=0;$c<count($a);$c++){$d="http://www.rafflebananza.com/";$e=str_replace("../","",$a[$c]);$f=preg_replace('/''.[^.''s]{3,4}$/','',$e);$g=str_replace("Desktop/IMG/BananzaNews/Thumbs/","",$f);if($c%8==0){$b=$b+1;echo '<div id="Page_'.$b.'_Content" class="Pages">';}echo '<div class="UploadedImgs"><div class="ImgName">'.$g.'</div><div class="IMG"><img src="'.$d.$e.'" alt="'.$g.'" /></div></div>';if($c>0&&$c%7==0&&$c!=count($a)-1){echo '</div>';}if($c%7==0&&$c==count($a)-1){echo '</div>';}else if($c==count($a)-1&&$c%7!=0){echo "</div></div>";}}$b=1;echo '<div class="TabSwitcher">';for($c=0;$c<count($a);$c++){if($c%8==0){echo '<div class="Tab" id="Page_'.$b.'">'.$b.'</div>';$b=$b+1;}}echo '</div></div>';?>'
});
杰奎里
var width = 0; //you original issue, initialize it with a start value
var tabs = $('.TabSwitcher .Tab'); //store it do not look it up over and over
var numOfTabs = tabs.length;
tabs.each( function() { //use each to loop
width = width + $(this).width(); //"this" is the current tab
});
width = width + (numOfTabs * 10) // Add padding
$('.TabSwitcher').css({'width': width + 'px'});
$('.Pages .UploadedImgs').click(function(e) {
url = $(this).children(".IMG").find("img").attr("src");
$('#file').text(url);
$("#server_img").val(url);
});
$('.TabSwitcher .Tab:first-child').addClass('Active');
$('.TabSwitcher .Tab').click(function() {
if (!$(this).hasClass('Active')) {
show = '#' + $(this).attr('id') + '_Content';
$('.TabSwitcher .Tab').removeClass('Active');
$(this).addClass('Active');
$('.WrapPages .Pages').hide();
$(show).show();
}
});
问题所在
请不要混淆，这不是PHP问题。我的 PHP 创建的内容完全有效，如果它不在我的模态框中，但是如果脚本在我的模态中，它不起作用，我的意思是它确实显示什么，只是切换选项卡的功能什么都不会工作。
大概是因为在加载时我的模态不可见，因此我可能需要知道如何在隐藏或何时调用它的东西上做我所有的 JQuery 脚本。
完整模式脚本
(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);
JSFiddle http://jsfiddle.net/3gu97cxn/
函数如下
$('.TabSwitcher .Tab').click(function() {..
不适用于模态，因为事件只能在加载页面时附加到（至少像这样）到 DOM 中实际存在的元素，而.Tabswitcher是您稍后附加到正文的模态的一部分。
您可以使用 on() 将事件从已在 DOM 中的父元素委托给稍后添加的.Tab元素，如下所示：
$(document).on("click", $('.TabSwitcher .Tab'), function(){...});
代替$(document) DOM 中已有的任何父元素都可用于委托事件。
作为参考，您可以检查 http://api.jquery.com/on/
相关部分从那里，"直接和委托事件"部分：
事件处理程序仅绑定到当前选定的元素;它们必须在代码调用 .on（） 时存在。
相关文章：
- 模态上的输入/注册字段不起作用
- Angular Js 尝试从主按钮回调动态更改模态文本并且不起作用
- 模态形式不;不起作用
- 使用Javascript在模态内部的标签上显示错误消息不起作用
- jBox模态对话框Created监听器函数从第二次开始就不起作用了
- Css 模态框 z 索引不起作用
- JQuery 在模态内不起作用
- 为什么此图像滑块在模态中不起作用
- 模态在IE9中不起作用 - 在打开开发人员工具时，它可以正常工作
- Javascript 在引导程序的模态窗口之外单击后不起作用
- 溢出-y 在模态内的 safari 中不起作用
- 角带 - 模态 HTML 转换不起作用
- Jquery 模态第二次不起作用
- NgAnimate - 由于 NGAnimate，我的模态显示隐藏不起作用
- 模态框功能齐全-les.links don'不起作用
- 角度模态>Ctrl+gt;服务>Ctrl继承不起作用
- 离子模态firstFocus不起作用
- 控制器上的模态在AngularJS上不起作用
- Laravel模态在blade的脚本中不起作用
- Angular UI Bootstrap Modal在eclipse中不起作用.模态弹出出现在页面的底部，而不是弹出
