Jquery работает медленно, замедляя веб-сайты?

Question

У меня проблема: я использую вкладки jquery U.I, которые загружают все с помощью ajax. Теперь у меня есть это сейчас, каждый раз, когда вы нажимаете на вкладку, частичное представление загружается в эту вкладку.

Теперь в этом частичном представлении они представляют собой файлы javascript, которые используют jquery для привязки всех событий, необходимых на этой вкладке, а также некоторые плагины jquery, которые я использую.

Теперь каждый раз, когда загружается эта вкладка, загружаются все эти скрипты. Если щелкнуть 10 раз, эти скрипты будут загружены 10 раз, что означает, что на моих кнопках теперь будет 10 одинаковых событий. Это означает, что если кто-то нажмет на эту кнопку, то все 10 событий сработают и сделают одно и то же.

Поэтому мне нужно найти какое-то решение, чтобы переместить весь сценарий и разместить его на главной странице и использовать jquery.live или другое решение.

Я пытался использовать jquery кеширование для вкладок пользовательского интерфейса, но это не сработает, так как некоторые вещи, например, в Tab A, когда изменился эффект Tab B, означают, что мне нужно перезагрузить Tab B, но скрипты не могут перезагрузиться, иначе я запускаю в ту же проблему, что и сейчас.

Answer 1

Прочитайте здесь для хорошей презентации, посвященной делегированию событий jQuery.

После прочтения выше посмотрите на это:

// using jQuery 1.4.2
(function($){
    // You can cache the container you plan on using for event delegation.
    //   If using $(document).ready(...) to call the below functions
    //     your "container" element should already exist in the DOM
    //   (the .specialAjaxLink elements don't have to exist yet).
    var container = $("#container");

    // whenever an element with the class "specialAjaxLink" is clicked
    // while inside your container element execute the handler on them.
    container.delegate(".specialAjaxLink", "click", function(){
        // do something amazing...
        solveWorldHunger(this);
        // stop propagation and prevent default...
        return false;
    });
}(jQuery));

Вам не нужно беспокоиться о проблемах производительности при использовании вышеуказанного метода, если вы не создаете такое сложное приложение, как gmail, docs или google wave.

Answer 2

я всегда, как правило, вызываю unbind () перед bind ()

Answer 3

Вместо использования .live () рассмотрите возможность использования делегирования событий. Прослушайте событие внутри контейнера, затем осмотрите тег и атрибуты, чтобы решить, как его обработать.

Гораздо эффективнее, если вы добавляете несколько элементов в DOM.