jQuery的負載問題

我與jQuery的負載異步功能頁面加載，這樣的：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（）函數應該使用漂亮的語法高亮顯示前塊，但是當通過jQuery load（）函數加載前塊的文件時，這不起作用。

但是，當我將pre塊硬編碼到主文件的內容div中時，它確實起作用。

任何想法??

感謝迄今爲止的答案。我明白了回調部分，並且現在在加載函數的回調中實現了SyntaxHighlighter.all（）調用，但仍然沒有運氣...

我會追加2個完整文件，因爲它們相當小大小atm。

的index.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>

請注意，最初的硬編碼預塊由SyntaxHighlighter.all（）正確地呈現，但加載函數的回調函數不起作用。

來源

2009-09-02 nkr1pt

的聲音聽起來有點像白癡的風險，你的意思是contentContainer.ef FECT（「高亮」）;或content.effect（「highlight」）; – karim79 2009-09-02 23:46:58

是否會在內容加載之前調用突出顯示的內容？例如作爲內容的回調載入會更好嗎？ – scunliffe 2009-09-02 23:47:42

SyntaxHighlighter.all綁定到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(); 
});

的手指穿過的作品，如果沒有（基於看代碼），你可能需要另送一些明確的論點（其中{}是空集的配置參數，以及this將content從阿賈克斯負載處理程序調用時）：


    SyntaxHighlighter.highlight({}, this);

來源

2009-09-03 15:17:56 searlea

對不起，我剛試過Syntaxhighlighter.highlight（）;它工作正常！但我得到一個警報（）時，一個文本被添加，說：刷js找不到或什麼。我可以禁用此消息嗎？ – 2011-03-13 16:15:58

@searlea：謝謝你救了我，所以我投票！ – Devima 2014-04-01 12:47:13

你需要調用在回調到負載：

content.load("content/"+this.id+".html",function() { 
    SyntaxHighlighter.all(); 
    });

load是異步的，因此快樂地而GET請求在後臺完成執行語句繼續。

來源

2009-09-02 23:46:38 seth

jQuery的負載問題

回答

相關問題