加载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代码

回答

相关问题