Как я могу удалить JQuery конфликт, когда они вызываются на той же странице из-за функции записи ...? - PullRequest
1 голос
/ 04 ноября 2011

ima новичок ... я добавил два разных jQuery ... один всплывающий, который вызывает файл (ajax), а другой слайдер на странице ...?

я попробовал "jQuery.noConflict ();»но они работают только для двух разных библиотек ...?

здесь я использую только jQuery ....

вот код ...

<script>
    /* calls the pop-up */
    $(document).ready(function(){

        $(".example5").colorbox();
    });
    /* calls the slider */
        $(function(){
        $('.selecter').mobilyselect({
            collection: 'all',
            animation: 'absolute',
            duration: 500,
            listClass: 'selecterContent',
            btnsClass: 'selecterBtns',
            btnActiveClass: 'active',
            elements: 'li',
            onChange: function(){},
            onComplete: function(){}
        });
    });

</script>

`

когда я удаляю одну вызывающую функцию, другой вызываемый скрипт работает .... но когда я сохраняю оба ... последний вызванный работает ....

может быть, это связано сфункция над записью ... но я не знаю, как ее решить ...?

поблагодарить вас ...

Ответы [ 4 ]

1 голос
/ 04 ноября 2011

jQuery.noConflict() используется, когда две разные библиотеки хотят контролировать $ (например, jQuery и Prototype ... или даже две разные версии jQuery, если вы хотите этого по какой-то причудливой причине).Это не нужно, когда у вас есть два разных скрипта, которые используют jQuery;на самом деле, jQuery.noConflict() делает это так, что $ больше не означает jQuery и обычно ломает любой сценарий, который ожидает использовать $ (как это делают оба ваших обработчика событий).jQuery объединит обработчики вместе, так что один будет работать за другим без необходимости делать что-либо еще.

Оба сценария должны работать, если вы удалите jQuery.noConflict().Или, как уже упоминалось, объединить два в один обработчик.Они действительно не должны быть отделены в любом случае.Но, тем не менее, оба должны работать нормально, если (1) ваш синтаксис правильный, (2) плагины загружены и (3) вы используете их правильно.См. http://jsfiddle.net/BeRLB/ для примера двух прекрасно взаимодействующих обработчиков событий.

Если вы на самом деле используете две разные библиотеки $, то это только немного усложняется.Чтобы продолжить использование $, вам нужно заключить код в функцию, которой вы передаете jQuery, например ...

(function($) {
     $(function() { ... });
     $(document).ready(function() { ... });
})(jQuery);
1 голос
/ 04 ноября 2011

Я бы просто поместил их в одну и ту же функцию:

$(document).ready(function(){

        $(".example5").colorbox();

        $('.selecter').mobilyselect({
            collection: 'all',
            animation: 'absolute',
            duration: 500,
            listClass: 'selecterContent',
            btnsClass: 'selecterBtns',
            btnActiveClass: 'active',
            elements: 'li',
            onChange: function(){},
            onComplete: function(){}
        });
});

Есть ли причина, по которой вы не можете этого сделать?

0 голосов
/ 04 ноября 2011

Просто объедините два:

$(document).ready(function(){

    $(".example5").colorbox();

    $('.selecter').mobilyselect({
        collection: 'all',
        animation: 'absolute',
        duration: 500,
        listClass: 'selecterContent',
        btnsClass: 'selecterBtns',
        btnActiveClass: 'active',
        elements: 'li',
        onChange: function(){},
        onComplete: function(){}
    });
});
0 голосов
/ 04 ноября 2011

Вы можете вызвать несколько функций jQuery внутри функции $(document).ready(function(){});:

$(document).ready(function(){

        $(".example5").colorbox();

        $('.selecter').mobilyselect({
            collection: 'all',
            animation: 'absolute',
            duration: 500,
            listClass: 'selecterContent',
            btnsClass: 'selecterBtns',
            btnActiveClass: 'active',
            elements: 'li',
            onChange: function(){},
            onComplete: function(){}
        });
});
...