2017-02-11 5 views
0

load()が私のカルーセルを壊している奇妙なバグがあります。ajax .load()私のスライダを壊す

私はSlick Sliderに3枚のスライドを持っています。 NEXTボタンをクリックすると、次のスライドに移動できます。また、スライド自体をクリックすることができ、それが猫のdiv要素と使用して、いくつかのテキストにコンテンツをロードします。

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

バグはあなたがロードされたコンテンツを表示し、[戻る]をクリックした後、NEXTボタンは、もはや機能していることではありません。何とかそれはナビゲーションを壊す。私はshow()とhide()を試しましたが、それは助けになりません。

参照してください私のcodepen demo

そして、これはあなたがその便利を見つけた場合、私はそのデモにロードしていurlです。私を助けるために時間を割いて

感謝:)

+1

をあなたがロードされている文書は、そのSRC jQueryのあるスクリプトタグを持っています。これにより、jQueryが主文書に2度目に読み込まれ、新しいjQueryが最初の文書を上書きします。上書きされたjQueryには滑らかなプラグインへの参照がないため、プラグインメソッドの呼び出しによってエラーがスローされます。 – 76484

+0

@ 76484 JQueryをソースURLから削除していただき、ありがとうございました!これを回答として投稿すると、それを解決して喜んでマークします。もう1つの質問があります。ソースにJQを追加したいのであれば、どうすれば同じJQファイルにリンクできますか?ありがとう:) –

+0

@ 76484クール私はロードされたURLは元のURLからJQファイルを使用することができると思う、もう一度ありがとう! –

答えて

1

私はあなたの質問にコメントで述べたように、他の文書が再ですので、あなたのスリックスライダープラグインは、あなたが他のドキュメントをロードした後に動作を停止した理由がありますjQueryライブラリをトップレベルのブラウジング環境に組み込むことができます。

jQueryプラグインは、新しいメソッドを定義し、それをjQuery.prototype(別名jQuery.fn)オブジェクトにアタッチすることで、自分自身をアクセス可能にします。

スクリプトタグを使用してドキュメントにjQueryライブラリを組み込むと、console.log(jQuery.fn);を呼び出すことができ、jQueryライブラリを構成するすべての便利なメソッドを持つオブジェクトが表示されます。

同様にSlick Sliderライブラリが含まれていれば、console.log(jQuery.fn);を再度呼び出すことができ、slickというメソッドプロパティがあることがわかります。

問題は、文書がそのsrc jQueryのは、あなたの親文書に新鮮scriptタグを挿入していることをurlに存在ドキュメントを読み込むときということです。これにより、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); 
+0

本当に有用で徹底して、ありがとうございます:) –

関連する問題