Библиотека jQuery «не функция» при вызове в событии click

Question

Я пытаюсь применить библиотеку текстового редактора jQuery к тегу P, который заполняется вызовом Ajax внутри модального. Это часть несколько старого и Ajax тяжелого сайта с большим количеством различных версий JQuery быть загружены, но работают

$.fn.jQuery 

в консоли JS в любой точке возвращается «2.1.4».

Я знаю, что библиотеки загружаются на страницу, так как применение «.jqte()» к существующему/«статическому» элементу на странице преобразует его по назначению. Это до того, как модальный загружается/отображается в потоке программы.

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

Вышеприведенный фрагмент превращает все элементы «.odd» в небольшие текстовые редакторы.

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

Вышеупомянутое то, что вызывает у меня боль.

Я с трудом рассуждая, почему ошибка

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

появляется только тогда, когда

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

называется в моем случае щелчка. Это также относится к идентификаторам.

Любая идея, что может вызвать это? Конфликт версии jQuery? This question seems similar, and suggests that it could be a version conflict

Возможно ли, что каким-то образом импорт html не будет прочитан, когда вызов Ajax будет выполнен? Или я не понимаю рамки?

Любая помощь очень ценится!

Некоторый код:

PHP генерации HTML и содержание быть размещены внутри модального:

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

Ссылка, которая открывает модальное:

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

Мой импорт:

<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> 

В приведенном выше коде, нажмет на .selector1 элемент выдаст ошибку, потому что они используют JQuery 1.7.2 и niftyPlugin не установлен на вашей копии JQuery 1.7.2. Клики на .selector2 будут работать, потому что плагин установлен на другой копии jQuery, 2.1.4.Когда была загружена вторая копия, были обновлены как $, так и jQuery, чтобы указать на его; но код внутри обратного вызова ready использует аргумент ($), который он получает, что является ссылкой на объект jQuery, который вызывает вызов ready (в первом случае, v1.7.2, во втором случае, v2.1.4) ,

Лучший ответ на эту работу - не использовать несколько копий jQuery.

Второй лучший ответ - всегда знать, какая версия jQuery используется в качестве кода кода, как $ или jQuery.