草庐IT

javascript - jquery 加载问题

coder 2024-07-26 原文

我正在使用 jQuery 加载函数异步加载页面,如下所示:

tree.click(function() {
                if ($(this).hasClass("file")) {
                    tree.removeClass("selected");
                    $(this).addClass("selected");
                    content.load("content/"+this.id+".html");
                    contentContainer.effect("highlight");
                    SyntaxHighlighter.all();
                }                         
            });

其中一个外部页面如下所示:

<pre class="brush: java;">
   /**
     * The HelloWorldApp class implements an application that
     * simply prints "Hello World!" to standard output.
     */
   class HelloWorldApp {
      public static void main(String[] args) {
         System.out.println("Hello World!"); // Display the string.
      }
   }
</pre>

现在是 SyntaxHighlighter.all();从上面调用 tree.click() 函数应该呈现带有漂亮语法突出显示的预 block ,但是当通过 jQuery load() 函数加载带有预 block 的文件时,这不起作用。

但是,当我将 pre block 硬编码到主文件的内容 div 中时,它确实有效。

有什么想法吗??

感谢您到目前为止的回答。 我了解回调部分,现在我在加载函数的回调中实现了 SyntaxHighlighter.all() 调用,但仍然没有运气......

我将附上 2 个完整的文件,因为它们在 atm 中的大小相当小。

索引.php:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>braindump</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
    <link type="text/css" href="css/jquery.treeview.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.treeview.js"></script>
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shCore.js"></script>
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shBrushJava.js"></script>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var tree = $("#tree li");
            var contentContainer = $("#contentContainer");
            var content = $("#content");

            SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.0.320/scripts/clipboard.swf';
            SyntaxHighlighter.all();

            // Treeview
            $("#tree").treeview({
                persist: "location",
                collapsed: true
            });

            tree.click(function() {
                if ($(this).hasClass("file")) {
                    tree.removeClass("selected");
                    $(this).addClass("selected");
                    content.load("content/"+this.id+".html", function() {
                        contentContainer.effect("highlight");
                        SyntaxHighlighter.all();
                    });
                }                         
            });

        });
    </script>
</head>
<body>
    <div id="container">
        <div id="header">

        </div>

        <div id="leftMenu" class="thinDottedBorder">
            <div class="min500px"></div>
            <ul id="tree" class="filetree">
                <li>
                    <span class="folder selectable">Design Patterns</span>
                    <ul>
                        <li id="softwareengineering/designpatterns/decorator" class="file"><span class="file selectable">Decorator Pattern</span></li>
                        <li id="softwareengineering/designpatterns/visitor" class="file"><span class="file selectable">Visitor Pattern</span></li>
                        <li id="softwareengineering/designpatterns/chainofresponsibility" class="file"><span class="file selectable">Chain of Responsibility</span></li>
                    </ul>
                </li>
                <li>
                    <span class="folder selectable">Design Principles</span>
                    <ul>
                        <li></li>
                    </ul>
                </li>
            </ul>
            <div class="clear"></div>
        </div>

        <div id="contentContainer" class="thinDottedBorder">
            <div class="min500px"></div>
            <div id="content">
                <pre class="brush: java;">
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
class HelloWorldApp {
   public static void main(String[] args) {
      System.out.println("Hello World!"); // Display the string.
   }
}
</pre>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</body>

和另一个文件:

<pre class="brush: java;">
 /**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
 class HelloWorldApp {
    public static void main(String[] args) {
       System.out.println("Hello World!"); // Display the string.
    }
  }
</pre>

请注意,最初硬编码的预 block 由 SyntaxHighlighter.all() 正确呈现,但加载函数的回调中的预 block 不起作用。

最佳答案

SyntaxHighlighter.all 绑定(bind)到 window.onload 事件 - 只触发一次。

要在页面加载后进行语法高亮,请改用highlight 函数:

content.load("content/"+this.id+".html", function () {
  // this is executed after the content is injected to the DOM
  contentContainer.effect("highlight");
  SyntaxHighlighter.highlight();
});

祝你好运,如果不行(根据查看代码),你可能需要加入一些明确的参数(其中 {} 是一组空的配置参数,而 当从 ajax 加载处理程序调用时,this 将是 content:


  SyntaxHighlighter.highlight({}, this);

关于javascript - jquery 加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1370738/

有关javascript - jquery 加载问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  6. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  7. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  10. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

随机推荐