加載AJAX後解釋JavaScript代碼

所以我有一個index.php頁面加載內容在一個div「容器」與AJAX 我的問題是，我有我的一個HTML包括JavaScript的一部分。它不工作，當我讓我的ajax請求，我得到我的內容，但不是js我怎樣才能解決它加載ajax後解釋的JavaScript？所以這是PHP請求：加載AJAX後解釋JavaScript代碼

<div id="container"> 
 
    <?php 
 
    $d = "container/"; 
 
    if (isset($_GET['p'])) { 
 
     $p = strtolower($_GET['p']); 
 
     if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".html")) { 
 
      include $d . $p . ".html"; 
 
     } else { 
 
      include "pages/404.html"; 
 
     } 
 
    } else { 
 
     include "pages/index.html"; 
 
    } 
 
    ?> 
 
</div> 
 
<script src="js/main.js"></script> 
 
<script src="js/jquery-1.11.2.min.js"></script> 
 
<script src="js/ajax.js"></script>

在我這裏的index.html頁：

<div class="section vs-section" data-speed="0.4"> 
 
    <div class="vs-transform" data-speed="0.5"> 
 
     <div class="overlay"></div> 
 
    </div> 
 
</div> 
 

 
<script> 
 
    var DOMReady = function (a, b, c) { 
 
     b = document, c = 'addEventListener'; 
 
     b[c] ? b[c]('DOMContentLoaded', a) : window.attachEvent('onload', a) 
 
    } 
 
    DOMReady(function() { 
 

 
     var section = document.querySelector('.vs-section'); 
 
     var divs = document.querySelectorAll('.vs-transform'); 
 

 
     var smooth = new Smooth({ 
 
      direction: 'horizontal', 
 
      section: section, 
 
      ease: 0.1, 
 
      els: divs 
 
     }); 
 
     smooth.init(); 
 
    }); 
 
</script>

最後我的ajax：

$(document).ready(function() { 
 
    $("#menu a").click(function() { 
 
     $("#top").append('<div class="loader"></div>'); // On ajoute le loader en haut 
 
     page = $(this).attr("href"); 
 
     $.ajax({ 
 
      url: "pages/" + page, 
 
      cache: false, 
 
      success: function (html) { 
 
       afficher(html); 
 
      }, 
 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
 
       afficher("erreur lors du chagement de la page"); 
 
      } 
 
     }) 
 
     return false; 
 
    }); 
 
}); 
 

 
function afficher(data) { 
 
    $(".loader").remove(); // On supprime le loader 
 
    $("#container").fadeOut(500, function() { 
 
     $("#container").empty(); 
 
     $("#container").append(data); 
 
     $("#container").fadeIn(1000); 
 
    }) 
 
}

來源

2015-12-25 Tiaw

我自己多次遇到這個問題。我用來解決這個問題的訣竅是在主index.php文件中使用Javascript代碼。然後在每次將某個頁面加載到div容器時將自定義事件觸發器放到div容器中。使用簡單的if語句檢測它正在使用哪個頁面，如果（在你的情況下）執行Javascript代碼index.html。不同的是，我用JS來加載頁面，而不是PHP。所以我不完全確定相同的解決方案是否適合您。 – icecub

我有我的網站上類似類型的代碼。訣竅在於將$(document).ready中正在加載的JavaScript代碼。您可以在同一頁面上有多個$(document).ready，這樣就不會成爲問題。

所以首先在容器div之前加載jquery。並確保動態加載的數據具有$(document).ready內的JavaScript代碼。

這裏看看我的網站我都做了同樣的http://brozeus.xyz/看看它的來源，它動態地加載從http://brozeus.xyz/body.php在頁面內的內容和數據通過.append()功能apppended後內http://brozeus.xyz/body.php的JavaScript代碼也運行。所以看看http://brozeus.xyz/body.php的來源吧。

來源

2015-12-25 06:04:56 Zeus

其實我的問題不是「阿賈克斯函數」動畫的淡入淡出效果很好問題是我在我的html中包含的js的一部分不是由ajax解釋，當我提出我的請求時... – Tiaw

@tib我有隻爲答覆。如果你看到網站和源代碼，你會注意到index.php通過ajax請求動態地加載body.php內容，body.php中的JS在'$（docment）.ready'函數中被解釋。 – Zeus

我的問題來自我的html裏面的js，因爲實際上如果我通過alert來取代它，它工作的很好......但我不知道如何使它的語法工作.... – Tiaw

加載AJAX後解釋JavaScript代碼

回答

相關問題