2010-09-27 33 views
2

你可以看到訪問的工作方式其假設負載時工作: link text.getScript()不是從.load()

正在使用標準裝載加載一切。

您可以嘗試得到它動態地加載在這裏: link text
,然後簡單,只需點擊「配件」鏈接...你可以看到任何警報每到我這裏來。

我有一種感覺,它與探測何時觸發getscript的能力有關,因爲ondomready在動態加載時不會重新加載。


這裏是一個將載入內容主要腳本:

$('#sub-navigation li a').click(function(){ 
    var toLoad = $(this).attr('href')+' #content-container > *'; 
    $('#content-container').hide('fast',loadContent); 


    var href = $(this).attr('href'); 
    if (href == ".") { 
     window.location.hash = ""; 
    } else { 
     window.location.hash = href; 
    } 

    // first remove the selected class from the active one 
    $('#sub-navigation li.selected').removeClass('selected'); 
    // then find the parent li of the clicked element and add the selected class 
    $(this).parents('li').addClass('selected'); 

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


    function loadContent() { 
     $('#content-container').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('#content-container').show('normal',hideLoader()); 
    } 
    function hideLoader() { 
     //$('#load').fadeOut('normal'); 
    } 
    return false; 

}); 

這裏是一個被加載的文件:

<div id="sub-navigation-content" class="transparent"> 
</div> 
<div id="content-container" class="transparent"> 
    <div id="content"> 
     <link rel="stylesheet" type="text/css" href="/files/tablesorter/themes/blue/style.css"> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() { 
        $("#parts").tablesorter(); 
        alert('sort performed'); 
       }); 
      }); 
     </script> 
     !!!!!!! INSERT MORE HTML HERE !!!!!!! 
    </div> 
</div> 

這裏的「插入更多的休息HTML HERE「:

   <h1>Parts</h1> 
      <table id=parts class=tablesorter style="width: 500px;"> 
       <thead> 
       <tr> 
        <th>Part #</th> 
        <th>Part Description</th> 
        <th>Price</th> 
        <th>Additional<br>Shipping</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>AM01</td> 
        <td>ECONOMY OARS (EACH)</td> 
        <td>$30.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM02</td> 
        <td>DELUXE OARS (EACH)</td> 
        <td>$42.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM03</td> 
        <td>OAR LOCKS (PAIR)</td> 
        <td>$10.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AM04</td> 
        <td>LAKER BOW CASTING</td> 
        <td>$25.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM05</td> 
        <td>PRO BOW CASTING</td> 
        <td>$25.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM06</td> 
        <td>OAR LOCK CASTING W/INSERT</td> 
        <td>$28.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM07</td> 
        <td>REAR CORNER CASTING RIGHT</td> 
        <td>$25.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM08</td> 
        <td>REAR CORNER CASTING LEFT</td> 
        <td>$25.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM09</td> 
        <td>FISHERMAN BOW SET (3 PC.)</td> 
        <td>$25.00</td> 
        <td>$3.00</td> 
       </tr> 
       <tr> 
        <td>AM10</td> 
        <td>OAR LOCK INSERTS (EACH)</td> 
        <td>$4.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AM11</td> 
        <td>DRAIN PLUG (5/8 MODIFIED)</td> 
        <td>$5.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AC06</td> 
        <td>LIFT VEST TYPE III</td> 
        <td>$25.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AC07</td> 
        <td>1" DRIAN PLUG</td> 
        <td>$5.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AC09</td> 
        <td>5/8" DRAIN PLUG</td> 
        <td>$5.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AM11</td> 
        <td>TOUCH UP PAINT</td> 
        <td>$15.00</td> 
        <td>$2.00</td> 
       </tr> 
       <tr> 
        <td>AM69</td> 
        <td>CONSOLE (SUPER PRO 16)</td> 
        <td>$135.00</td> 
        <td>Please call</td> 
       </tr> 
       <tr> 
        <td>AM70</td> 
        <td>CONSOLE W/STEERING (SUPER PRO 16)</td> 
        <td>$430.00</td> 
        <td>Please call</td> 
       </tr> 
       </tbody> 
      </table> 

按照jason的答案。我沒有選擇在我的知識,而不是做一個醜陋的變通辦法如下:

如果有人有一個更優雅的想法,請讓我知道。

function showNewContent() { 
     $('#content-container').show('normal',hideLoader); 

     if (href == "parts") { 
      $.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() { 
       $("#parts").tablesorter(); 
      }); 
     } 
    } 




Edit: 12/18/2010-
我現在有動態加載,這取決於「零件」頁面加載不同的腳本。當然,我可以繼續使用我之前做過的相同解決方法,但我正在爲此尋找更好的解決方案。我已經添加了一個賞金來幫助。


updated solution: 我能夠只是使用get()mimicing負載功能,做我想做的:

$.get(href, function(response){ 
    var contents = $(response).find('#content-container > *'); 
    $("#content-container").html(contents); 
}); 

這是或多或少什麼傑森告訴我要到;因此我給他賞金。


updated solution 2: 查找()命令將去掉任何腳本標記爲1.4+,所以我不得不這樣做:

$.get(href, function(response){ 
    var contents = $(response).find('#content-container > *'); 
    $(response).filter('script[src=""]').each(function(){ 
      contents.push(this); 
    }); 
    $("#content-container").html(contents); 
}); 

我仍然希望避免這種繁亂,但這似乎是我必須忍受的。

+0

是 「插入這裏更多的HTML」 一節中'#parts'? – 2010-09-27 23:48:17

+0

是的,我會包括HTML – ParoX 2010-09-27 23:56:19

回答

4

下面是$ .load中的相關位代碼,它執行jQuery 1.4中的插入操作。2(起始線4820):

// Request the remote document 
jQuery.ajax({ 
url: url, 
type: type, 
dataType: "html", 
data: params, 
complete: function(res, status) { 
    // If successful, inject the HTML into all the matched elements 
    if (status === "success" || status === "notmodified") { 
     // See if a selector was specified 
     self.html(selector ? 
      // Create a dummy div to hold the results 
      jQuery("<div />") 
       // inject the contents of the document in, removing the scripts 
       // to avoid any 'Permission Denied' errors in IE 
       .append(res.responseText.replace(rscript, "")) 

       // Locate the specified elements 
       .find(selector) : 

      // If not, just inject the full result 
      res.responseText); 
    } 

    if (callback) { 
     self.each(callback, [res.responseText, status, res]); 
     } 
    } 
}); 

正如你可以看到,如果在內容中指定了選擇要加載(你是),jQuery將除去從HTML所有聯腳本塊插入之前進入頁面。

爲什麼?動態創建DOM文檔片段在瀏覽器中並不完全一致,並且沒有真正的方法來控制何時,如何甚至是何時執行腳本。

一個例子是:如果在創建片段時,它發生(如jQuery不會,它運行在選擇之前)?在這種情況下,腳本運行時,您的新內容實際上不會成爲父文檔的一部分。

你如何解決這個問題?嗯,你總是可以重新什麼$ .load()在內部做,(基本上只是發出GET請求,從響應中一個jQuery對象,然後調用它.find(selector)追加前/注入)。但是,要小心。這可能是不可靠的,我不知道如何不同的瀏覽器可能會對此作出反應。

我記得讀到的正是這種長時間的討論,而回 - 我無法找到它的權利,但是當我做,我會在這裏添加一個鏈接。

+0

+1的其餘部分,很好的抓住! – 2010-09-27 23:58:12

+0

啊...我明白了。我已經做了變通,並將其發佈到編輯... – ParoX 2010-09-28 00:03:40

0

我能夠只是使用get()mimicing負載功能,做我想做的:

$.get(href, function(response){ 
    var contents = $(response).find('#content-container > *'); 
    $("#content-container").html(contents); 
}); 

這是或多或少什麼傑森告訴我要到;因此我給他賞金。

+0

其實我還是需要一個解決方案,顯然這工作正常,在1.3.2但不是1.4+ – ParoX 2010-12-19 11:28:49

+0

更多的研究:HTTP://forum.jquery。 COM /主題/ jQuery的刪除腳本標籤,HTML的字符串時,使用從-HTML的 看來.find()方法去除腳本標記。 – ParoX 2010-12-19 11:56:37