加载html文件,javascript消失

时间:2017-09-09 17:38:59

标签: javascript jquery html

我更改了网站上的菜单,因此它使用jquery替换了我的页面上的主要内容,而不是仅仅href-html页面。类似的东西:

$(function() {
  $('.new_page_title').on('click', function (e) {
      e.preventDefault();
      $('.main_content').load('new_page.html');
      $('body').scrollTop(0);
  });
});

对于我的一个页面,我想要一个从数组中随机选择的旋转句子。以前,我只是在页面加载时这样做,但是现在我在上面的函数中添加了一行来调用随机函数,它看起来像:

    function make_a_sentence() {
        var sentenceArray = [
            'digging holes in the back yard',
            'eating our vegetables',
            'doing something important',
            'building the future',
            'watering my plants',
            'propogating succulents',
            'watching Call the Midwife',
            'looking outside and dreaming of salvation',
            'poopin\'',
            'providing for my family',
            'watching you through your window',
            'digging around craigslist',
            'rotating my tires',
            'settling lawsuits'
        ];

        var selected = Math.floor(sentenceArray.length * Math.random());
        $("#id_of_div").html(sentenceArray[selected]);
}

然后在click函数结束时调用make_a_sentence()。当我只是加载页面时,句子没有出现,当我调试时,它将句子插入div直到它到达调试结束然后句子消失。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

load函数是异步的,您需要根据load回调中加载的页面内容运行代码(否则您的更改会在之前重写负载完成),如:

$(function() {
  $('.new_page_title').on('click', function (e) {
    e.preventDefault();
    $('.main_content').load('new_page.html', function () {
      $('body').scrollTop(0);
      make_a_sentence()
    });
  });
});

请参阅jQuery.load以供参考。