Как реализовать 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. Это работает для меня хорошо. Найти более подробную информацию в своем блоге здесь