函数jquery调用两次或不起作用

Question

当我点击某个项目时，我有一个菜单，它会在div“content”中加载一个页面。我尝试了两种方法，但我没有找到一个好问题。 第一种方式：我有一个jquery功能Gallery（）（它是一个菜单滑块），我在页面加载时调用它，但每次加载页面时都会调用它，因此它不能正常工作。 第二种方式：在我的页面html“index.php”中调用此函数，其中div为“content”，它仅适用于某个部分，因为它无法定义某些变量（如$('#gallery ul li.vizu').length）。 请帮忙！我不知道该怎么做！

function Gallery() {

	var marge = 10;
	function showSlide(direction) {
		var SlideWidthP = $('#gallery ul li.active').prev().width();
		var SlideWidthN = $('#gallery ul li.active').width();
		left = ( direction == 1 ) ? "+=" + (SlideWidthN+marge) : "-=" + (SlideWidthP+marge);
		$('#gallery').stop( true, true ).animate({left: left}, 800);
		};
	
	$('.previous').click(function (e) {
		e.preventDefault();
		if ($('#gallery ul li').eq( 0 ).hasClass('active')){
			$('#gallery ul li').hasClass('active')
			}else{
			$('#gallery ul li.active').removeClass('active').prev().addClass('active');
			showSlide(1);
		}		
	});

	$('.next'). click(function (e) {
		e.preventDefault();
		if ($('#gallery ul li').last().hasClass('active')){
			$('#gallery ul li').hasClass('active')
			}else{
			$('#gallery ul li.active').removeClass('active').next().addClass('active');
			showSlide(-1);
		}
	});
	
	var VizuCount = $('#gallery ul li.vizu').length;
	var TextCount = $('#gallery ul li.text').length;
	var PlanCount = $('#gallery ul li.plan').length;
	var VizuWidth = 
		$('#gallery ul li.vizu').each(function(){
			$Vizuwidth=$('#gallery ul li.vizu').width()+marge;
			})
	var TextWidth = 
		$('#gallery ul li.text').each(function(){
			$Textwidth=$('#gallery ul li.text').width()+marge;
			})
	var PlanWidth = 
		$('#gallery ul li.plan').each(function(){
			$Planwidth=$('#gallery ul li.plan').width()+marge;
			})
	var VizuLenght= VizuCount*$Vizuwidth;
	var TextLenght= TextCount*$Textwidth;
	var PlanLenght= PlanCount*$Planwidth;
	
	$('#boutons .icoImage').click(function (e) {
		e.preventDefault();
		$('#gallery').animate({left:0},800);
		$('#gallery ul li.active').removeClass('active');
		$('#gallery ul li.vizu').first().addClass('active');
	});
	$('#boutons .icoTexte').click(function (e) {
		e.preventDefault();
		$('#gallery').animate({left:-VizuLenght},800);
		$('#gallery ul li.active').removeClass('active');
		$('#gallery ul li.text').first().addClass('active');
	});	
	$('#boutons .icoPlan').click(function (e) {
		e.preventDefault();
		$('#gallery').animate({left:-(VizuLenght+TextLenght)},800);
		$('#gallery ul li.active').removeClass('active');
		$('#gallery ul li.plan').first().addClass('active');
	});	
	
	
}
function Menu2(){
	var marge = 10;
	var VizuCount = $('#gallery ul li.vizu').length;
	var TextCount = $('#gallery ul li.text').length;
	var PlanCount = $('#gallery ul li.plan').length;
	var VizuWidth = 
		$('#gallery ul li.vizu').each(function(){
			$Vizuwidth=$('#gallery ul li.vizu').width()+marge;
			})
	var TextWidth = 
		$('#gallery ul li.text').each(function(){
			$Textwidth=$('#gallery ul li.text').width()+marge;
			})
	var PlanWidth = 
		$('#gallery ul li.plan').each(function(){
			$Planwidth=$('#gallery ul li.plan').width()+marge;
			})
	var VizuLenght= VizuCount*$Vizuwidth;
	var TextLenght= TextCount*$Textwidth;
	var PlanLenght= PlanCount*$Planwidth;
	
	$('#boutons .icoImage').click(function (e) {
		e.preventDefault();
		$('#gallery').animate({left:0},800);
		$('#gallery ul li.active').removeClass('active');
		$('#gallery ul li.vizu').first().addClass('active');
	});
	$('#boutons .icoTexte').click(function (e) {
		e.preventDefault();
		$('#gallery').animate({left:-VizuLenght},800);
		$('#gallery ul li.active').removeClass('active');
		$('#gallery ul li.text').first().addClass('active');
	});	
	$('#boutons .icoPlan').click(function (e) {
		e.preventDefault();
		$('#gallery').animate({left:-(VizuLenght+TextLenght)},800);
		$('#gallery ul li.active').removeClass('active');
		$('#gallery ul li.plan').first().addClass('active');
	});	
}
//loadPage
function loadPage(url){ 
	$('#content').load(url,Loader); 
	};
Loader =
	function(){
		if($('#gallery').length){
     		$('#menu2').show();
			$('#gallery ul li').first().addClass('active');
			Gallery(); //here it called for the First Way
			}else{
			$('#menu2').hide();
			}
			
	};

<!--Page INDEX.PHP!-->
<body onload=loadPage('<?=WEBROOT;?>page/<?=$accueil['nicename']?>')>

<div id="header" class="col-12">
</div><!--header-->
<div id="navigation" class="col-3">
<div id="logo">
<table>
<td>
<a href="index.php">
  <img src="img/logo.png"/> </a></td>
  </table>
</div><!--logo-->
<div id="mainmenu" class="col-2">
<?php foreach($menu as $menuitem):?>
    <ul class="menu">
    
    	<li> <a href="Javascript:loadPage('<?=WEBROOT;?>page/<?=$menuitem['wnicename']?>');"><?=$menuitem['name']?></a></li>
            </ul>
            <ul class="sousmenu">
                <?php 
				foreach($sousmenu as $sousmenuitem):
					 if ($sousmenuitem['id_parent']== $menuitem['id']){
						 ?>
					<li>
					<a href="Javascript:loadPage('<?=WEBROOT; ?>page/<?=$sousmenuitem['wnicename'] ;?>');"><?=$sousmenuitem['name']?></a></li>
					<?php }
                          endforeach; ?>
                       </ul>
                       <?php endforeach; ?>
</div><!--mainmenu-->
</div><!--navigation-->
<div id="menu2">
		<div id="nomProj">      
        	<?php //echo $_SESSION['worksname']?>
       	</div><!--nomProj-->
    	<div id="boutons">
    		<a class="icoImage" href="#" title="Visuels"></a>
            <a class="icoTexte" href="#" title="Description"></a>
            <a class="icoPlan" href="#" title="Plans"></a>
    	<div id="fleches">
        <a href="#" class="previous"></a>
	<a href="#" class="next"></a>
    </div><!--fleches-->
  		</div><!--boutons-->
	</div><!--menu2-->
	

<div id="content" class="col-12">

</div><!--content-->
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/mainmenu.js" type="text/javascript"></script>
<script src="js/gallery.js" type="text/javascript"></script> 
<script type="text/javascript">
  if($('#gallery')){Gallery()};
</script><!--here it called for the Second Way
  
<!--Page LOADED!-->
<?php                                        
if ($work['gallery']==1){
	echo '<div id="gallery"><ul>';
	foreach($vizu as $v):
		echo '<li class="vizu"><img src="' . WEBROOT2 .'img/works/'. $v['name']. '" height="500px"></li>';
		endforeach;
	foreach($texte as $t):
		echo '<li class="text"><img src="' . WEBROOT2 .'img/works/'. $t['name']. '" height="500px"></li>';
		endforeach;
	foreach($plan as $p):
		echo '<li class="plan"><img src="' . WEBROOT2 .'img/works/'. $p['name']. '" height="500px"></li>';
		endforeach;;
	echo "</ul></div>";
	}else{
	echo '<div id="page">'.$work['content'].'<div>';
	}
?>