Question

我正在尝试使用以下内容将特定<div>的数据从包含<ul><li>结构的网页加载到此页面上的<div>。目前正在发生的是，似乎“似乎”尝试在数据出现之前加载菜单。我之所以这么说，是因为我的菜单首先在页面上弹出一个NULL，这是默认设置，然后我期待的列表会在我的空飞出菜单下填入<div id="hierarchy">。

我是 JQuery 的新手，所以希望这是一个简单，无知的错误。

<script type="text/javascript">
$(document).ready(function(){
    $('div.ms-quickLaunch').replaceWith('<div id="hierarchy" style="border:solid 1px white; width:0px;"></div>');
    });

$(function(){
            $('#hierarchy').load('http://wwcshare/icenter/Pages/wwcMenuContent.aspx #menuContent'); // grab content from another page
            $('#hierarchy').menu({
                    autoShow: true,
                    content: $('#hierarchy').next().html(),
                    backLink: false,
                    crumbDefaultText: ' '
                });         
        });
</script>

Answer 1

.load()以异步方式运行，您需要调用任何依赖于它在complete回调中加载的内容的函数，如下所示：

$(function(){
  $('#hierarchy').load('http://wwcshare/icenter/Pages/wwcMenuContent.aspx #menuContent',
    function() {
      $(this).menu({
        autoShow: true,
        content: $(this).next().html(),
        backLink: false,
        crumbDefaultText: ' '
      });         
   });
});

在回调this中指的是您要加载的元素#hierarchy，因此您也可以在那里保存选择器。

Answer 2

无需创建两个不同的就绪功能

如果要在加载后创建菜单，则必须将其放入加载回调中

   jQuery(document).ready(function(){
      $('div.ms-quickLaunch')
         .replaceWith('<div id="hierarchy" style="border:solid 1px white; width:0px;"></div>')
         ;
      jQuery('#hierarchy')
         .load( 'http://wwcshare/icenter/Pages/wwcMenuContent.aspx #menuContent'
              , function(){ //callback here
                   jQuery(this)
                      .menu({ autoShow         : true
                            , content          : jQuery(this).next().html()
                            , backLink         : false
                            , crumbDefaultText : ' '
                           })
                      ;                             
                   }
              )
         ;
   });

其他说明：

最好使用jQuery代替$;虽然$较短，但许多框架现在都使用它，主动使用jQuery
此外，您应该考虑在jsFiddle.net发布更详细的示例以获取后续帮助

JQuery方法执行顺序？

2 个答案: