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的类？

无法在通过jQuery的ajax加载的页面内执行javascript

4 个答案: