jQueryライブラリ "not a function"クリックイベントで呼び出されたとき

Question

私は、モーダル内でAjax呼び出しによって読み込まれるPタグにjQuery Text Editorライブラリを適用しようとしています。これは、多くの異なるjQueryのバージョンがロードされると、やや古いとAjax重いサイトの一部ですが、「2.1.4」の任意の点を返しますで、JSコンソールに

$.fn.jQuery 

を実行しています。

ページ上の既存の「静的な」要素に ".jqte（）"を適用すると、意図した通りにライブラリが読み込まれることがわかります。これは、モーダルがプログラムのフローでロード/可視化される前です。

$(document).ready(function(){ 
    $(".odd").jqte(); 
}); 

上記のスニペットは、すべての ".odd"要素を小さなテキストエディタに変換します。

$("#showScraper").click(function(){ 
    $(".editor").jqte(); 
}); 

上記は私に苦痛を与えている原因です。

私は目の肥えた苦労を抱えている理由エラー

Uncaught TypeError: $(...).jqte is not a function 

は

$(".myClass").anyLibrary(); 

が私のクリックイベント内で呼び出されたときにのみ表示されます。これはIDにも当てはまります。

何が原因なのでしょうか？ jQueryのバージョンの競合？ This question seems similar, and suggests that it could be a version conflict

Ajax呼び出しが行われたときに何らかの形でhtmlインポートが読み込まれない可能性はありますか？それともスコープを理解できないのですか？

すべてのヘルプは大歓迎です！

いくつかのコード：モーダルの内側に配置されるHTMLやコンテンツを生成

PHP：

$button = '<p><a href="/my/ajax/path" id="showScraper" rel="modal:open">Show me the stuff</a></p>'; 

マイ輸入：

echo '<div id="scrapedText"><p class="editor" name="text1">'; 
      foreach ($matchContent['about']['p'] as $key => $value) { 
       echo $value , "<br /><br />"; 
      } 
echo '</p></div><br/>'; 

モーダルを開くリンク

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="/css/jquery.modal.css" /> 
<script type="text/javascript" src="/scripts/jquery.modal.js"></script> 
<link rel="stylesheet" type="text/css" href="/static/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css" /> 
<script type="text/javascript" src="/static/jQuery-TE_v.1.4.0/jquery-te-1.4.0.min.js"></script> 

Answer 1

あなたのサイトはjQueryを複数回読み込んでいると言いました（複数の異なるバージョン）。質問に含まれているscriptタグのリストには表示されていませんが、実際はそれが正しいと思われます。

これは、プラグインをロードした時点のjQuery変数を制御するjQueryのバージョンにのみプラグインを追加するということです。例えばだから：上記のコードで

<script src="jquery-1.7.2.js"></script> 
<script> 
$(document).ready(function($) { 
// Note -------------------^ 
    $(".selector1").click(function() { 
     $(this).niftyPlugin(); 
    }); 
}); 
</script> 
<!-- ... --> 
<script src="jquery-2.1.4.js"></script> 
<script src="nifty-plugin.js"></script> 
<script> 
$(document).ready(function($) { 
// Note -------------------^ 
    $(".selector2").click(function() { 
     $(this).niftyPlugin(); 
    }); 
}); 
</script> 

、彼らはjQueryの1.7.2使用しているとniftyPluginは、jQueryの1.7.2のコピーにインストールされていないため、エラーがスローされます.selector1要素をクリックします。 .selector2をクリックすると、プラグインがjQuery 2.1.4の他のコピーにインストールされているため、動作します。2番目のコピーがロードされると、$とjQueryの両方がを指すように更新されました。 readyコールバック内のコードは、受信した引数（$）を使用しています。これは、readyコールを呼び出すjQueryオブジェクトへの参照です（最初のケースではv1.7.2、2番目のケースではv2.1.4） 。

この作業に最適な答えは、jQueryの複数のコピーを使用することではありません。

次善の答えは常にコードの所定のビットが$又はjQueryとして使用しているのjQueryのバージョンを認識することです。