第1页有一个ID为(#navigation)的菜单,具有一个称为Page2的链接,以及一个ID为(global_content)的DIV,该链接在单击页面2时显示内容。在同一页面(第1页)中,我编写了一个jquery加载函数,因此当我单击链接时,它应显示内容而无需重新加载页面。加载事件工作正常,显示了内容,但没有 Page 2 具有的脚本标签。

这是第1页中的代码

<script>
jQuery(document).ready(function() {

    //jQuery('#navigation li a').click(function(){
    jQuery('#navigation li').on('click', 'a', function(){

    var toLoad = jQuery(this).attr('href')+' #global_content';
    jQuery('#global_content').fadeOut('fast',loadContent);
    jQuery('#load').remove();
    jQuery('#wrapper').append('<span id="load">LOADING...</span>');
    jQuery('#load').fadeIn('normal');
    function loadContent() {
        jQuery('#global_content').load(toLoad, function() {
        jQuery('#global_content').fadeIn('fast', hideLoader());

        });
    }
    function showNewContent() {
        jQuery('#global_content').show('normal',hideLoader());
    }
    function hideLoader() {
        jQuery('#load').fadeOut('normal');
    }
    return false;

    });
}); </script>

这是第2页中的代码
<div id="wall-feed-scripts">

  <script type="text/javascript">

    Wall.runonce.add(function () {

      var feed = new Wall.Feed({
        feed_uid: 'wall_91007',
        enableComposer: 1,
        url_wall: '/widget/index/name/wall.feed',
        last_id: 38,
        subject_guid: '',
        fbpage_id: 0      });

      feed.params = {"mode":"recent","list_id":0,"type":""};

      feed.watcher = new Wall.UpdateHandler({
        baseUrl: en4.core.baseUrl,
        basePath: en4.core.basePath,
        identity: 4,
        delay: 30000,
        last_id: 38,
        subject_guid: '',
        feed_uid: 'wall_91007'
      });
      try {
        setTimeout(function () {
          feed.watcher.start();
        }, 1250);
      } catch (e) {
      }

    });

  </script>
</div>

<div class="wallFeed">
some content
</div>

但我得到的输出是
<div id="wall-feed-scripts"></div>

 <div class="wallFeed">
    some content
    </div>

你能帮忙吗?

最佳答案

您可以直接使用 jQuery.load stripping <script> tags来绕过jquery.ajax的限制,这是shorthand methodsloadgetpost等使用的基础方法。
我们将使用jquery.html(使用innerHTML)来更新DOM。

var toLoad         = this.href,
    toLoadSelector = '#global_content';

...

function loadContent() {
    jQuery.ajax({
        url: toLoad,
        success: function(data,status,jqXHR) {
            data = jQuery(data).find( toLoadSelector );
            jQuery('#global_content').html(data).fadeIn('fast', hideLoader());
        }
    });
}

如您所见,我们在响应中应用选择器toLoadSelector('#global_content')以仅插入页面的所需部分。

更新

更好的方法是将一些参数引入loadContent函数,以便更易于重用。这是更新(和经过测试)的版本:
<script>
jQuery(function($) {

    $('#navigation li a').on('click', function() {
        loadContent( '#global_content', this.href, '#global_content' );
        return false;
    });

    function loadContent(target, url, selector) {

        $(target).fadeOut('fast', function() {

            showLoader();

            $.ajax({
                url: url,
                success: function(data,status,jqXHR) {
                    $(target).html($(data).find(selector).addBack(selector).children())
                    .fadeIn('fast', hideLoader());
                }
            });

        });
    }

    function showLoader() {
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>').fadeIn('normal');
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }
});
</script>

有关更改的一些注意事项:
jQuery(function() { ... })

是相同的
jQuery(document).ready( function() { ... } )

指定function($)jQuery用作函数内的$,从而节省了键入时间。

现在,关于此表达式:
$(data).find(selector).addBack(selector).children()

不幸的是,$("<div id='foo'>").find('#foo')不返回任何结果:仅匹配后代。这意味着,如果 Page2 #global_content div直接位于<body>之下,则它将不起作用。添加 addBack(selector) 可以匹配顶级元素本身。有关更多详细信息,请参见this so question
.children()确保本身不包括 Page2 中的<div id='global_content'>标记,否则 Page1 将具有
<div id="global_content">
    <div id="global_content">

从技术上讲这是非法的,因为id在文档中必须是唯一的。

07-24 09:49
查看更多