Как реализовать JQuery.noConflict()?
Я использую как javascript, так и код jquery на одной и той же странице html. По какой-то причине библиотека jQuery останавливает работу моего собственного кода javascript.
Я нашел эту страницу: jQuery No Conflict, в котором говорится, что вы можете использовать jquery.noConflict для выпуска $back to javascript. Однако я не уверен, как это сделать?
В частности, я не уверен, как правильно это реализовать? Где идет код JQuery, куда идет JS-код?
Мой код ниже:
<script type="text/javascript">
$.noConflict();
// Code that uses other library $ can follow here.
</script>
Ответы
Ответ 1
jQuery.noConflict
будет reset переменная $
, поэтому она больше не является псевдонимом jQuery
. Помимо просто называть его один раз, вам больше нечего делать. Хотя вы можете создать свой собственный псевдоним с возвращаемым значением, если хотите:
var jq = jQuery.noConflict();
И, как правило, вы хотите сделать это сразу после включения jQuery и любых плагинов:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
jQuery.noConflict();
// Code that uses other library $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>
Вы также можете сделать еще один шаг и освободить jQuery
с помощью noConflict(true)
. Хотя, если вы возьмете этот маршрут, вам определенно понадобится псевдоним, поскольку ни $
, ни jQuery
, вероятно, не будет того, что вы хотите:
var jq = jQuery.noConflict(true);
Я думаю, что этот последний вариант в основном используется для смешивания версий jQuery, особенно для устаревших плагинов, когда вы хотите обновить сам jQuery:
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>
Ответ 2
По умолчанию jquery использует переменную jQuery
, а для вашего удобства используется $. Если вы хотите избежать конфликтов, хорошим способом является инкапсуляция jQuery следующим образом:
(function($){
$(function(){
alert('$ is safe!');
});
})(jQuery)
Ответ 3
Если я не ошибаюсь:
var jq = $.noConflict();
то вы можете вызвать функцию jquery с помощью jq. (независимо).
jq('#selector');
Ответ 4
Это позволяет вам присвоить переменной jQuery другое имя и по-прежнему использовать ее:
<script type="text/javascript">
$jq = $.noConflict();
// Code that uses other library $ can follow here.
//use $jq for all calls to jQuery:
$jq.ajax(...)
$jq('selector')
</script>
Ответ 5
Обычно используется, если вы используете другую библиотеку, которая использует $
.
Чтобы по-прежнему использовать символ $
для jQuery, я обычно использую:
jQuery.noConflict()(function($){
// jQuery code here
});
Ответ 6
Если вы посмотрите на примеры на странице api, выполните следующее:
Пример. Создает другой псевдоним вместо jQuery для использования в остальной части script.
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library $()
$("content").style.display = 'none';
Поместите var j = jQuery.noConflict()
после ввода jquery, а затем введите конфликтующие скрипты. Затем вы можете использовать j
вместо $
для всех ваших потребностей jquery и использовать $
для другого script.
Ответ 7
В дополнение к этому, передавая true значение $.noConflict(true); также будет восстанавливать предыдущую (если есть) глобальную переменную jQuery, так что плагины могут быть инициализированы с помощью правильной версии jQuery, когда используются несколько версий.
Ответ 8
Вы просто назначаете пользовательскую переменную для использования JQuery вместо своего значения по умолчанию $
. Затем JQuery обертывается в новую область функций, поэтому $
больше не конфликтует с пространством имен.
<script type="text/javascript">
$jQuery = $.noConflict();
// Other library code here which uses '$'
$jQuery(function(){ /* dom ready */ }
</script>
Ответ 9
Метод noConflict() освобождает идентификатор $shortcut, так что другие скрипты могут использовать его в следующий раз.
По умолчанию jquery $as:
// Actin with $
$(function(){
$(".add").hide();
$(".add2").show();
});
Или как пользовательский:
var j = jQuery.noConflict();
// Action with j
j(function(){
j(".edit").hide();
j(".add2").show();
});
Ответ 10
<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
<script>
var $i = jQuery.noConflict();
// alert($i.fn.jquery);
</script>
<script src="JavascriptLibrary/jquery-1.8.3.js"></script>
<script>
var $j = jQuery.noConflict();
//alert($j.fn.jquery);
</script>
<script src="JavascriptLibrary/jquery.colorbox.js"></script>
<script src="Js/jquery-1.12.3.js"></script>
<script>
var $NJS = jQuery.noConflict();
</script>
Вы можете сделать это следующим образом:
<script>
$i.alert('hi i am jquery-1.4.2.js alert function');
$j.alert('hi i am jquery-1.8.3.js alert function');
</script>
Ответ 11
/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */
var jq = $.noConflict();
(function($){
$('document').ready(function(){
$('button').click(function(){
alert($('.para').text());
})
})
})(jq);
live view example on codepen easy to understand.
http://codepen.io/kaushik/pen/QGjeJQ
Ответ 12
Сегодня у меня есть эта проблема, потому что я реализовал "загрузочное меню", в котором используется версия jQuery вместе с "галереей изображений fancybox". Конечно, один плагин работает, а другой не из-за конфликта jQuery, но я его преодолел следующим образом:
Сначала я добавил меню "bootstrap" Js в нижнем колонтитуле script, поскольку меню представлено на всех страницах веб-сайта:
<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>
И на странице галереи изображений "fancybox" выполните следующие действия:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
И хорошая вещь работает как шарм:)
Попробуйте:)
Ответ 13
Я исправил эту ошибку, добавив этот код конфликта
<script type="text/javascript">
jQuery.noConflict();
</script>
после моих jQuery и js файлов и получения файла была ошибка (найденная консолью браузера) и заменить все "$" на jQuery после этого на всех файлах ошибок js на моем веб-сайте Magento. Это работает для меня хорошо.
Найти более подробную информацию в своем блоге здесь