无法执行通过jQuery的Ajax加载的javascript内部页面

Question

摘要...

我有一个页面正在使用ajax加载其他页面，并且其中包含javascript。 javascript使用document.ready ，在使用此类代码时无法正常工作...

    $.ajax({

        type: 'get',
        url: 'layouts/' + layout + '.php',
        success: function(data){ 

            $('.swap').fadeOut('slow', function(){ // container

                $(this).delay(100).fadeIn().html(data);

            });

        }

    }); 

从javascript运行速度太快的角度来看，它无法正常运行。

加载使用document.ready或类似代码的页面的最佳方法是什么？

Answer 1

当您使用ajax加载页面时，该页面中的javascript通常不会执行。 您可以使用jQuerys的load()方法加载页面，然后执行脚本。

在模板页面中，添加<div>来保存页面的实际内容，如下所示：

<div id="container">
  <ul>
    <li></li>
  </ul>
</div>

在“控制面板”页面上，还要有一个容器<div> ：

<div id="container"></div>
<script src="bxslider.js"></script>

然后，您可以以这种方式调用您的代码

$(function(){

  var layout = 'layoutpage1';

  // this loads the contents of the #container div in layout page
  // into #container div on CP page.
  $('#container').load( '/layouts/' + layout + '.php #container', function() {
    initSlider();  // initialize the slider we just loaded
  });

  function initSlider() {
    $('.bxslider').bxSlider({
            pager: false,
            controls: false,
            auto: true,
            mode: 'fade',
            speed: 1500
    });
  }

  // if there is already a slider on the page we can initialize it here
  // just remove comment
  // initSlider();
});

Answer 2

您可以在正文之前将所有脚本添加到主html文件中，并尝试在使用ajax调用的页面中启动其功能。

<div>

<ul class="slider">
    <li><img /></li>
    <li><img /></li>
</ul>

<script>
  $(document).ready(function(){
     //slider.init(); start slider 
  })
</script>

Answer 3

如果使用load()方法，脚本将执行。 但是请注意， document.ready已经出现在主页上，因此脚本需要位于它们引用的html之后。

或者，您可以在成功回调中使用$.getScript()

$('.swap').fadeOut(function(){
     $(this).load('layouts/' + layout + '.php', function(){
        $(this).fadeIn()
     });
})

Answer 4

我在这里发现了很简单的东西，否则我就很简单了...

“ $（'。swap'）。fadeOut（'slow'，function（）{”

您在HTML中没有标记为swap的类吗？