ajax .load（）打破我的滑塊

我有一個奇怪的錯誤，其中load（）打破我的旋轉木馬。ajax .load（）打破我的滑塊

我有一個Slick Slider與3張幻燈片。您可以單擊NEXT按鈕移至下一張幻燈片。您也可以點擊幻燈片本身和它加載內容到貓的股利和使用一些文本：

$('.frame').load(url);

的錯誤是您查看加載的內容，並單擊後退後，下一步按鈕不再起作用。不知怎的，它打破了導航。我試過show（）和hide（），但這沒有幫助。

這是url我加載到該演示如果發現有用。

感謝您抽出寶貴時間來幫助我:)

您加載該文件有一個腳本標記，它的src是jQuery的。這會導致第二次將jQuery加載到主文檔中，並且新的jQuery會覆蓋第一個文檔。被覆蓋的jQuery沒有引用流暢的插件，所以對插件方法的調用會拋出一個錯誤。 – 76484

@ 76484謝謝，從源代碼中刪除JQuery修復了bug！如果您將此作爲答案發布，我很樂意將其標記爲已解決。我還有一個問題，如果我想在我的源代碼中有一些JQ，我怎麼能這樣做，將兩個鏈接都鏈接到同一個JQ文件？謝謝:) –

@ 76484很酷我覺得加載的url可以使用原始URL中的JQ文件，再次感謝！ –

正如我在你的問題中留言說，以後你的油滑滑塊插件停止工作的原因加載其他文件，因爲其他文件，重新包括jQuery庫到您的頂級瀏覽上下文中。

通過定義一個新方法，然後將它附加到jQuery.prototype（別名爲jQuery.fn）對象，jQuery插件可以讓自己訪問。

當您通過腳本標記將jQuery庫包含到文檔中時，可以調用console.log(jQuery.fn);，您將看到一個包含組成jQuery庫的所有方便方法的對象。

後你也有類似的包括Slick Slider庫，你可以再打電話console.log(jQuery.fn);，你可以發現它有一個名爲slick的方法屬性。

問題是，當您加載駐留在url的文檔時，該文檔將插入新的script標籤到您的父文檔，其src是jQuery。這會導致重新加載jQuery庫，從而消除您的初始實例。如果您在此刻撥打console.log(jQuery.fn.slick);，您會發現它是undefined。

我以前從未見過加載到另一個文檔的div中的整個HTML文檔（而不是HTML的片段）。這是將元素插入頂層文檔的主體中，該文檔不應該在那裏，如<head>和<body>。我真的很驚訝，這是造成幾個問題給你。

文檔通常嵌套在其他文檔中的方式是使用iframe。 iframe中的文檔將是其自己的沙盒，其樣式和腳本不會與父框架中的文檔發生衝突。

您也可以用類似下面的替換$('.frame').load(url);實施iframe到您的項目：

var $iframe = $('<iframe />', { 
    src: url, 
    style: 'height:100%; width:100%;' 
}); 
$('.frame').html($iframe);

2017-02-12 06:04:54 76484

真的很有幫助和徹底，非常感謝你:) –

回答