1

我有一个使用 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>

这是现场直播:

http://ernestosillas.com/santexgroupAJAX/index16.html

4

4 回答 4

1

使用委托方式来解决这个问题。

这是因为您正在将事件绑定到文档准备就绪。您必须使用委托才能使其正常工作。喜欢上。这是因为您通过ajax加载的内容在加载时不在页面上。所以没有附加任何事件。

您的代码应该看起来像这样:

$('body').on('click','#clients-container',function(){
 alert("hello");
});   

它不必是正文,而是在文档准备好后未加载的元素,它是#clients-container 的父元素

你有

<div id="clients-container">
</div>

在主页面使用容器的父级使用委托方式。

于 2013-07-13T10:36:20.847 回答
1

我遇到了类似的问题,这对我有用:

  1. 确保脚本在服务器上运行或.load()函数不起作用

  2. 试试看$(document).ready( function(),有时候这就是问题

  3. 如果您想在通过函数$.getScript加载的外部页面上使用 jQuery,请尝试函数.load

  4. finally 使用return(false)jQuery 脚本末尾的函数,否则该脚本可能无法在 Opera、chrome 和 safari 中运行

  5. 从您尝试加载的外部页面中删除任何 HTML、正文、头部标签等

希望这可以帮助任何有类似问题的人,这应该可以为您节省大量研究。

于 2012-09-30T00:07:07.500 回答
0

尝试使用on而不是使用click,因为我可以看到您使用的是较新版本的 Jquery

$('li#toServices').on('body','click',function(){

// your code

});
于 2012-07-16T19:28:00.457 回答
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() 非常缓慢已弃用

于 2012-07-16T19:26:25.307 回答