javascript - 无法在通过 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通常不会被执行。您可以使用 jQuery 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();
});