Функции jQuery должны запускаться снова после завершения ajax

Question

Я занимаюсь разработкой веб-сайта, который анализирует RSS-каналы и отображает их в зависимости от категории. Вы можете посмотреть его здесь: http://vitaminjdesign.com/adrian

Я использую вкладки для отображения каждой категории. На вкладках используется ajax для отображения нового набора каналов при их нажатии.

Я также использую два других скрипта - один называется equalheights , который изменяет размеры всех высот до высоты самого высокого элемента. А другой сценарий, который я использую, называется умные столбцы , которые в основном изменяют размер ваших столбцов, поэтому он всегда занимает весь экран.

Первая проблема, с которой я сталкиваюсь, - это когда вы нажимаете новую вкладку (для отображения каналов в этой категории). При нажатии на новую вкладку консоль отображает ошибку jQuery:

$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights(); 

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

MY GUESS - хотя все каналы (на всех вкладках) загружаются при загрузке страницы, при выборе новой вкладки оба сценария jQuery необходимо запустить снова. какие-нибудь идеи о том, как я могу заставить это работать должным образом?

Следует отметить одну вещь - я использовал метод ajaxSuccess для обеспечения того, чтобы equalHeights работал на первой странице ... но он не будет работать после нажатия на вкладку.

Мой код jQuery для вкладок:

$(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        $("#cities li:nth-child(1)").addClass('zebra');
        $("#column li ul li:nth-child(6)").addClass('zebra1');


        //On Click Event
        $("ul.tabs li").click(function() {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            $(".block").equalHeights();
            return false;
        });

Благодаря Macy (см. Ответ ниже) я перенес свой jQuery-скрипт в следующее: (все еще не работает)

$(document).ajaxSuccess(function(){
        var script = document.createElement('script');
        script.src = 'js/equalHeight.js';
        document.body.appendChild(script);
        equalHeight($(".block"));

Answer 1

Я обнаружил некоторые небольшие проблемы в вашем коде. Я не уверен, что мои предложения решат все проблемы, но я решил описать свои первые результаты здесь.

1) Вы должны удалить запятую перед '}'. В настоящее время звонок выглядит как $("#column").sortable({/**/,});

2) Функция equalHeight не является плагином jQuery. Это причина, по которой вызов $(".block").equalHeights(); в вашем обработчике события 'click' следует за ошибкой "$ (". Block "). EqualHeights не является функцией", которую вы описали. Вы должны изменить место кода на equalHeight($(".block"));, как вы используете его в других местах.

3) Скрипт http://vitaminjdesign.com/adrian/js/equalHeight.js определяет только функцию equalHeight и не запускает никаких действий. После того, как загрузитесь, оставайтесь на странице. Поэтому не следует загружать в конце каждого запроса AJAX. Поэтому я предлагаю уменьшить сценарий

$(document).ajaxSuccess(function(){
    var script = document.createElement('script');
    script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
    document.body.appendChild(script);
    equalHeight($(".block"));

    $("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {               
        $(this).attr("target", "_blank");
    });
});

до

$(document).ajaxSuccess(function(){
    equalHeight($(".block"));

    $("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {               
        $(this).attr("target", "_blank");
    });
});

4) Предлагаю изменить код http://vitaminjdesign.com/adrian/js/equalHeight.js с

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}

до

function equalHeight(group) {
   var tallest = 0;
   group.each(function() {
      var thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}

для исключения использования глобальных переменных tallest и thisHeight. Я рекомендую вам использовать JSLint , чтобы проверить все ваши коды JavaScript. Я нахожу это очень полезным.

5) Я рекомендую вам использовать любой валидатор XHTML, чтобы найти небольшие, но иногда очень важные ошибки в разметке. Попробуйте this например, чтобы увидеть некоторые ошибки. Чем больше вы будете следовать стандартам XHTML, тем больше вероятность того, что результаты будут разными в разных браузерах. Кстати, вы можете значительно сократить количество ошибок в вашем текущем коде, если сценарии, включенные в страницу, будут иметь следующий вид

<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>

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

Answer 2

Я не думаю, что вам нужно снова запускать сценарии после ajax, или, по крайней мере, это не "главная" проблема.

У вас, кажется, есть некоторые проблемы в скрипте smartColumn.js

Сейчас кажется, что он работает только с ul с идентификатором "column" ('#column'), и он равен , работая с тем столбцом UL #, который вы выполняете. есть, но, конечно, ваш HTML имеет много других «столбцов», каждый из которых имеет класс «столбец» ('.column'), с которым вы также хотите, чтобы он работал.

Просто чтобы получить начало того, что вы пытаетесь сделать, измените все селекторы в smartColumn.js , которые говорят 'ul#column', чтобы сказать 'ul.column' вместо этого, а затем измените HTML так, чтобы первый «столбец» имел class="column", а не id="column".

Это должно решить как минимум 100% ширину столбцов.

Это должно решить вашу "главную" проблему. Но есть и другие проблемы.

Answer 3

Некоторая ошибка здесь

$("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            .
            .
            .
        });

Должен быть переписан следующим образом

$("ul.tabs li").click(function() {
            $(this).addClass("active").Siblings("li").removeClass("active");; //Remove any "active" class Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            .
            .
            .
        });

Answer 4

По сути, когда вы добавляете новый элемент в документ, скрипт equheights не привязывает свое поведение к этому новому элементу. Таким образом, «быстрое исправление» - это, вероятно, повторное встраивание сценария equheights после выполнения запроса ajax, чтобы он заново присоединялся ко всем элементам на странице, включая только что добавленные элементы.

Перед этой строкой: $ (". Block"). EqualHeights (); , добавьте строку скрипта, которая повторно встраивает / повторно запускает ваш скрипт equheights.

$.getScript('<the location of your equalHeightsScript>'); 
$.getScript('<the location of your smartColumnsScript>');
$(".block").equalHeights();

или

var script = document.createElement('script');
script.src = '<the location of your script>';
document.body.appendChild(script);

Лучшим решением было бы обновить плагин, чтобы он использовал живую версию. Тем не менее, я не до этого на данный момент:)