1
我有一個網站使用AJAX加載不同的頁面。加載工作正常，但一旦它加載頁面內的任何jquery不起作用。當用戶點擊一個導航按鈕時，它應該加載一個div內的頁面。我最初創建了帶有HTML標籤的頁面，只在頁面內加載了一個特定的標籤，但是我從加載的頁面中刪除了html和body標籤，但仍然無法工作。Ajax加載頁面內的Jquery不起作用
這裏的HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Santex Group</title>
<link href="_css/main_15.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://use.typekit.com/dcn6whd.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.infinite_carousel.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function()
{
$('li#toServices').click(function()
{
$('#services').load('services.html #services-container');
});
$('ul#siteNav li#toServices').localScroll({
target:'body',
axis:'x',
offset: {left: -140},
queue:true //one axis at a time
});
});
$(document).ready(function()
{
$('li#toHow').click(function()
{
$('#how').load('how.html #how-container');
});
$('ul#siteNav li#toHow').localScroll({
target:'body',
axis:'x',
offset: {left: -140},
queue:true //one axis at a time
});
});
$(document).ready(function()
{
$('li#toWhy').click(function()
{
$('#why').load('why.html #why-container');
});
// Scroll the whole document
$('ul#siteNav li#toWhy').localScroll({
target:'body',
axis:'x',
offset: {left: -140},
queue:true //one axis at a time
});
});
$(document).ready(function()
{
$('li#toClients').live('click', function()
{
$('#clients').load('clients.html');
});
$('ul#siteNav li#toClients').localScroll({
target:'body',
axis:'x',
offset: {left: -140},
queue:true //one axis at a time
});
});
$(document).ready(function()
{
// Scroll the whole document
$('ul#siteNav li#toContact').localScroll({
target:'body',
axis:'x',
offset: {left: 0},
queue:true //one axis at a time
});
});
$(document).ready(function()
{
// Scroll the whole document
$('ul#siteNav li#toCareers').localScroll({
target:'body',
axis:'x',
offset: {left: -150},
queue:true //one axis at a time
});
});
$(document).ready(function()
{
// Scroll the whole document
$('ul#siteNav li#toExtra').localScroll({
target:'body',
axis:'x',
offset: {left: -150},
queue:true //one axis at a time
});
});
// ]]></script>
</head>
<body>
<header id="mainHeader">
<div id="mainNav">
<div id="logo">
<a title="Home" href="#mainHeader"></a>
</div>
<div id="navWrapper">
<ul id="phone-login">
<li><a href="#">Call Us Toll Free (888) 622-7098</a></li>
<li><a href="#">CLIENT LOGIN</a></li>
</ul>
<ul id="siteNav">
<li id="toServices"><a class="star" href="#services">Services</a></li>
<li id="toHow"><a href="#how">How</a></li>
<li id="toWhy"><a href="#why">Why</a></li>
<li id="toClients"><a href="#clients">Clients</a></li>
<li id="toContact"><a href="#contact">Contact</a></li>
<li id="toCareers"><a href="#careers">Careers</a></li>
</ul>
</div>
</div>
<div class="header-writeup">
<hgroup>
<h1>Innovate. Create. Experience</h1>
<h2>We embrace technology to empower people.</h2>
<h3>We are driven by technology, focused on making better products and interfaces. We are a full-service Global digital company that emphasized the importance of emerging technoloy solution sfor all types of clients.</h3>
</hgroup>
</div>
</header>
<div id="wrapper">
<section id="services" class="scrolling-content">
</section>
<section id="how" class="scrolling-content"> </section>
<section id="why" class="scrolling-content"> </section>
<section id="clients" class="scrolling-content"> </section>
<section id="contact" class="scrolling-content">
</section>
<section id="careers" class="scrolling-content">
</section>
</div>
<footer id="pageFooter">
</footer>
</body>
</html>
這裏是我試圖加載具有jQuery的滾動條加載
<div id="clients-container">
<h1 class="section-heading">Clients</h1>
<div class="section_container">
<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<li><img src="_images/clientlogos1.gif" height="146" width="950" alt="Clients and Relationships" /></li>
<li><img src="_images/clientlogos2.gif" height="146" width="950" alt="Clients and Relationships" /></li>
</ul>
</div>
</div>
<div class="view-our-work-link">
<a class="button float-left" href="../content/our-work">View Our Work</a>
</div>
</div>
</div>
這裏的時候不工作的一個頁面的網站直播：
http://ernestosillas.com/santexgroupAJAX/index16.html
嘗試使用'live'而不是'click' – Norse 2012-07-16 19:21:48