jQuery load()不会在div中加载脚本标签 [英] Jquery load() doesn't load script tags in div

问题描述

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

Page 1 has a Menu with id (#navigation), with a link called Page2 and DIV with id (global_content) that shows contents when the link Page2 is clicked. In the same page (Page 1) I wrote a jquery load function, so that when I click the link it should display the content without page reload. The load event works fine, the content is shown, but without the script tags that the Page 2 has.

这是第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>

你能帮忙吗?

推荐答案

您可以绕过<script>标签 > jquery.ajax 直接使用，这是速记方法 load，get，post等. 我们将使用 jquery.html (使用innerHTML)来更新DOM.

You can bypass the restrictions of jQuery.load stripping <script> tags by using jquery.ajax directly, which is the underlying method used for the shorthand methods load, get, post etc.. We'll use jquery.html, which uses innerHTML, to update the 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')仅插入页面的所需部分.

As you see, we apply the selector toLoadSelector ('#global_content') on the reponse to only insert the desired portion of the page.

更新

一种更好的方法是在loadContent函数中引入一些参数，以便更易于重用.这是更新(并经过测试)的版本:

A better approach is to introduce some parameters to the loadContent function so it is more easily reusable. Here's an updated (and tested) version:

<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>

---

有关更改的一些注意事项:

---

A few notes on the changes:

jQuery(function() { ... })

与

jQuery(document).ready( function() { ... } )

指定function($)可使jQuery在函数中以$的形式使用，从而节省了键入内容.

Specifying function($) makes jQuery available as $ within the function, which saves some typing.

现在，关于此表达式:

$(data).find(selector).addBack(selector).children()

不幸的是，$("<div id='foo'>").find('#foo')不返回任何结果:仅匹配后代.这意味着，如果 Page2 在<body>的正下方具有#global_content div，则它将不起作用.添加 addBack(selector) 可以匹配顶级元素本身.有关更多详细信息，请参见此问题.

Unfortunately, $("<div id='foo'>").find('#foo') does not return any results: only descendants are matched. This means that if Page2 has the #global_content div directly under <body>, it will not work. Adding addBack(selector) makes it possible to match the top-level element itself. See this so question for more details.

.children()确保 Page2 中的<div id='global_content'>标记本身不包含在内，否则 Page1 将具有

The .children() makes sure that the <div id='global_content'> tag from Page2 is not itself included, otherwise Page1 will have

<div id="global_content">
    <div id="global_content">

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

which is technically illegal, since an id must be unique in a document.

这篇关于jQuery load()不会在div中加载脚本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！