Question

我现在已经问过这个问题，但我对这个问题完全无知，而且我无法真正使用这些答案。我用教程制作了我页面的每个脚本，但是我失败了。我的问题：我有一个部分，我从外部html加载ajax的内容（使用这个tut：https://www.youtube.com/watch?v=dmfZp4iFzOs），我必须在每次加载内容后运行一个js。但是脚本不起作用，因为它在我加载内容之前就已经运行了。

html（例如）：

<body>    
    <ul>
        <li><a class="menu" href="1.html">1</a></li>
        <li><a class="menu" href="2.html">2</a></li>
        <li><a class="menu" href="3.html">3</a></li>
    </ul>
    <div id="content_area"></div>
    <script src="menu.js"></script>
</body>

menu.js：

$('.menu').click(function(){
    var href = $(this).attr('href');
    $('#content_area').hide().load(href).fadeIn('normal');
    return false;
});

外部html很复杂，但每次点击（并加载）菜单时都必须运行此脚本：

var init = function() {
  var box1 = document.querySelector('.container1').children[0],
      showPanelButtons = document.querySelectorAll('#show-buttons button'),
      panelClassName = 'show-front',

      onButtonClick = function( event ){
        box1.removeClassName( panelClassName );
        panelClassName = event.target.className;
        box1.addClassName( panelClassName );
      };

  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
  }

  document.getElementById('toggle-backface-visibility').addEventListener( 'click', function(){
    box1.toggleClassName('panels-backface-invisible');
  }, false);

};

window.addEventListener( 'DOMContentLoaded', init, false);

抱歉我的英语不好。请帮我！感谢

Answer 1

jQuery的.load()函数是一个异步操作，所以它在完成之前会“返回”。因此，不是等待它返回，而是为它提供一个“回调”函数，它将在完成时调用。像这样：

$('#content_area').hide().load(href, function () {
    init();
    $('#content_area').fadeIn('normal');
});

请注意以下几点：

我也将.fadeIn()调用移到了回调中，因为在加载内容之前你不想淡入元素。
两个调用都包含在一个无名（匿名）function () {}中。此函数本身是一个传递给.load()函数的值，将在.load()完成其工作时调用。

Answer 2

不使用“window.addEventListener（'DOMContentLoaded'，init，false）;”，而是可以使用带有jquery load（）函数的回调。

$('#content_area').hide().load(href, init).fadeIn('normal');

在ajax内容加载后运行js

2 个答案: