jQuery AJAX負載的內容，加載的內容的行爲就像一個單獨的文檔

我有一個網頁，我想用Ajax加載一個內容而沒有realoading我做了，但我希望代碼工作的鏈接從加載內容也是如此。至於加載的內容似乎表現爲一個單獨的文檔（如果我點擊加載的內容上的鏈接，它會打開一個新窗口），這不是我的意圖。jQuery AJAX負載的內容，加載的內容的行爲就像一個單獨的文檔

JS文件

$(document).ready(function() { 
    $(".zoom").hover(zoomIn); 
    $(".zoom").mouseout(zoomOut); 
    $(".zoom").click(select); 
    function zoomIn() { 

      $(this).animate({ 
       left:'10px', 
       height:'190px', 
       width:'190px', 
      }); 
      $(this).css({"border-radius": "110px"}); 

    } 
     function zoomOut() { 
      $(this).animate({ 
       left:'-10px', 
       height:'140px', 
       width:'140px' 
      }); 
      $(this).css({"border-radius": "90px"}); 

    } 
      function select() { 
      $(this).css({"border":"8px #e53cc7 solid", "border-radius": "110px"}); 
      $(".zoom").not(this).css({"border":"none"}); 

    } 
    function getRandom(num){ 
     var my_num = Math.floor(Math.random()*num); 
     return my_num; 
    } 
}); //End document.ready() 
$(function() { 
//ajax load of main div content specified in links 
     // attaching click handler to links 
    $("a.loadnew").click(function (e) { 
     // cancel the default behaviour 
     e.preventDefault(); 

     // get the address of the link 
     var href = $(this).attr('href'); 

     // getting the desired element for working with it later 
     var $wrap = $('#ajax-main'); 

     $wrap 
      // removing old data 
      .html('') 

      // slide it up 
      .slideUp() 

      // load the remote page 
      .load(href + ' #content', function() { 
       // now slide it down 
       $wrap.slideDown(); 
      }); 
    }); 
});

主HTML

<html> 
<head> 
    <title>Winter Olympics' Champions</title> 
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'> 
    <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>--> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <meta name="description" content="Educational apps for Android devices, smartphones, tablets. Language learning, coding, studying, various subjects." /> 
    <meta name="keywords" content="Android app, educational, language learning, self study, mobile devices, smartphone, tablet" /> 
    <link rel="stylesheet" type="text/css" href="styles/stylewinter.css" /> 
</head> 
<body> 
    <header> 
     <div id="tagline"> 
      <h1>Winter Olympics' Champions</h1> 
      <h2>the best in their category</h2> 
     </div> 
    </header> 

    <nav> 
     <div id="wrapper"> 
       <a class="loadnew" href="loadcontent/skiing.html"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a> 
       <a class="loadnew" href="loadcontent/biathlon.html"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a> 
       <a class="loadnew" href="loadcontent/bobsleigh.html"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a> 
       <a class="loadnew" href="loadcontent/icehokey.html"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a> 
       <a class="loadnew" href="loadcontent/luge.html"><img class="zoom" src="images/luge.png" alt="luge" /></a> 
       <a class="loadnew" href="loadcontent/skating.html"><img class="zoom" src="images/skating.png" alt="skating" /></a> 
    </div> 
    </nav> 

    <div id="contentwrapper"> 
     <div id="ajax-main"> 

     </div> 
    </div> 

    <footer> 
    </footer> 
    <script src="scripts/my_scripts.js"></script> 
</body>

<div id="content"><a class="loadnew" href="loadcontent/figure.html">content1</a><br/><a class="loadnew" href="loadcontent/speed.html">content2</a><br/><a class="loadnew" href="loadcontent/shortspeed.html">content3</a></div>

來源

2014-05-10 user3623523

不知何故負載（）表現滑稽，所以我用普通取代它舊和$ .get （）。我也修改了你的代碼並使用了代理（就像我在第一個回答中提到的那樣）將點擊事件綁定到所有的a.loadnew（你可以稍後將JS從這裏移動到一個單獨的文件，就像你曾經擁有它）：

<html> 
<head> 
    <title>Winter Olympics' Champions</title> 
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'> 
    <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>--> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <meta name="description" content="Educational apps for Android devices, smartphones, tablets. Language learning, coding, studying, various subjects." /> 
    <meta name="keywords" content="Android app, educational, language learning, self study, mobile devices, smartphone, tablet" /> 
    <link rel="stylesheet" type="text/css" href="styles/stylewinter.css" /> 
</head> 
<body> 
    <header> 
     <div id="tagline"> 
      <h1>Winter Olympics' Champions</h1> 
      <h2>the best in their category</h2> 
     </div> 
    </header> 

    <nav> 
     <div id="wrapper"> 
      <a class="loadnew" href="loadcontent/skiing.html"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a> 
      <a class="loadnew" href="loadcontent/biathlon.html"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a> 
      <a class="loadnew" href="loadcontent/bobsleigh.html"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a> 
      <a class="loadnew" href="loadcontent/icehokey.html"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a> 
      <a class="loadnew" href="loadcontent/luge.html"><img class="zoom" src="images/luge.png" alt="luge" /></a> 
      <a class="loadnew" href="loadcontent/skating.html"><img class="zoom" src="images/skating.png" alt="skating" /></a> 
     </div> 
    </nav> 

    <div id="contentwrapper"> 
     <div id="ajax-main"> 
      Shit 
     </div> 
    </div> 

    <footer> 
    </footer> 

    <script type="text/javascript"> 
     $(function() { //ready function 
      $(".zoom").hover(zoomIn); 
      $(".zoom").mouseout(zoomOut); 
      $(".zoom").click(select); 

      //ajax load of main div content specified in links 
      // attaching click handler to links 
      $("#wrapper, #ajax-main").on("click", "a.loadnew", function(e) { 
       // cancel the default behaviour 
       e.preventDefault(); 

       // getting the desired element for working with it later 
       var $wrap = $('#ajax-main'); 

       $wrap.html('') 
        // slide it up 
        .slideUp(); 

       // load address of the link  
       $.get($(this).attr('href'), function(resp) { 
        $wrap.html(resp); 
        $wrap.slideDown(); 
       }); 
      }); 
     }); 

     function zoomIn() { 
      $(this).animate({ 
       left:'10px', 
       height:'190px', 
       width:'190px', 
      }); 
      $(this).css({"border-radius": "110px"}); 
     } 

     function zoomOut() { 
      $(this).animate({ 
       left:'-10px', 
       height:'140px', 
       width:'140px' 
      }); 
      $(this).css({"border-radius": "90px"}); 
     } 

     function select() { 
      $(this).css({"border":"8px #e53cc7 solid", "border-radius": "110px"}); 
      $(".zoom").not(this).css({"border":"none"}); 
     } 

     function getRandom(num){ 
      var my_num = Math.floor(Math.random()*num); 
      return my_num; 
     } 
    </script> 
</body> 
</html>

來源

2014-05-10 14:58:09 AVK

我試過這個解決方案對我不起作用。我鏈接到的html文件只有我以前發佈的div，而主html文檔具有一系列同一類的鏈接。 – user3623523

爲什麼不把相同的概念應用於整個文檔呢？ _ $（document）.on（「click」，「a.loadnew」，function（e）{...} _ – AVK

您的意思是將html內容加載到主html中？當我更改$（「a.loadnew」）.click（函數（e）到$（document）.on（「click」，「a.loadnew」，函數（e）甚至加載鏈接的第一個內容打開爲另一個文檔。 – user3623523

jQuery AJAX負載的內容，加載的內容的行爲就像一個單獨的文檔

回答

相關問題