我有一个使用AJAX加载不同页面的网站。加载工作正常，但一旦加载页面内的任何Jquery不起作用。当用户单击导航按钮时，它应该将页面加载到div中。我最初创建了带有HTML标签的页面，只在页面中加载了一个特定的标签，但是我从加载的页面中删除了html和body标签，但仍然无效。
这是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>
这是网站直播：
答案 0 :(得分：1)
我遇到了类似的问题，这对我有用：
确保脚本在服务器上运行或.load()功能无效
尝试$(document).ready( function()，有时这就是问题
如果要在通过$.getScript函数
.load函数
最后使用jQuery脚本末尾的return(false)函数，或者脚本可能无法在opera，chrome和safari中使用
从您尝试加载的外部网页中删除所有HTML，正文，标题等
希望这可以帮助任何有类似问题的人，这可以为您节省大量的研究。
答案 1 :(得分：1)
使用委托方式来解决这个问题。
这是因为您在文档准备就绪时绑定了事件。您必须使用委托才能使其正常工作。喜欢上。这是因为当你加载时，你通过ajax加载的内容不在页面上的页面上。所以没有附加任何事件。
您的代码应该看起来像这样：
$('body').on('click','#clients-container',function(){
alert("hello");
});
它不一定是正文，而是文档就绪后未加载的元素，它是＃clients-container
的父元素你有
<div id="clients-container">
</div>
使用主页面中容器的父级来使用委托方式。
答案 2 :(得分：0)
如果您不受限制，请加载jQuery 1.7.xx（只需在http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js中写入1.7而不是1.3.2）并使用jQuery.on()作为绑定，live（）为{{3} }和extreeemly slow。
答案 3 :(得分：0)
尝试使用on而不是使用click，因为我可以看到您正在使用较新版本的Jquery
$('li#toServices').on('body','click',function(){
// your code
});