Поддержка Проблемы и решения Не срабатывает всплывающее окно после подгрузки AJAX

  • Доброго дня! Столкнулся с проблемой того что, после того как подгружается часть записи на страницу с помощью ajax, не работает вызов всплывающего окна по ссылке, просто ничего не происходит. Гуглил много, причину в целом понимаю, решения как исправить найти не могу (точнее ничего из того что пробовал не помогло ни капли, может руки кривые, с другой стороны были бы полностью прямые сюда за помощью не обратился бы))).

    <script> 
        jQuery.noConflict();
    jQuery(document).ready(function($){
        $.ajaxSetup({cache:true});
        $("a.ajax").click(function(){
            var post_url = $(this).attr("href");
            var post_id = $(this).attr("rel");
            $("#tabs").html('<div class="loading">Загружаем цены...</div>');
           
        $("#tabs").load(post_url + " .content_wrap");
       
        return false;
    });
    });
    
    </script>
    
    <div class="containerM">
      
    <a class="toggleMenu" href="#">ВЫБЕРИТЕ МОДЕЛЬ</a>
      
    <ul class="nav" id="accordion">
      <!-- вывод рубрики записей -->
      <h3><li><a href="#">Ремонт iPhone</a></li></h3>
        <ul>
            <?php query_posts('tag_id=55&posts_per_page=-1'); ?>
      <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax" onclick='slowScroll("#tabs")'><?php the_title(); ?></a>
      </li>
      <?php endwhile; endif; wp_reset_query(); ?>
        </ul>
    </div>
    
    <div id="tabs"><---ВЫБЕРИТЕ МОДЕЛЬ СЛЕВА</div>;

    Если потребуется скину файл целиком!
    Для всплывающего окна использую popup builder и CF7 для самой формы.
    P.S. если грузить пост целиком а не конкретный див, то само собой все работает

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 1 по 15 (всего 21)
  • Модератор Yuri

    (@yube)

    Попробуйте заменить
    $("a.ajax").click(function(){
    на
    $("body").on("click", "a.ajax", function(){

    Скрипт должен быть в «статической» части страницы, а не в подгружаемой аяксом.

    К сожалению не помогло((

    Модератор Yuri

    (@yube)

    Я не вижу на странице on("click", "a.ajax"

    Ну я попробовал не пошло и вернул как было! Сейчас сделал по вашему совету

    Модератор Yuri

    (@yube)

    У меня сейчас попап открывается или не открывается независимо от аякса. Если открылся после загрузки страницы, так и продолжает нормально работать. А если не открылся сразу, то потом тем более. Зависимости не вижу. Но чаще не работает. Я бы попробовал сделать попап каким-нибудь другим способом.

    Вы хотите сказать что вот тут у Вас иногда срабатывает попап?
    http://joxi.ru/Q2KqlwZCL3ML5r

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

    Модератор Yuri

    (@yube)

    Вы хотите сказать что вот тут у Вас иногда срабатывает попап?

    Oops! Нет, я про Большую Желтую Кнопку «позвоните мне»

    Модератор Yuri

    (@yube)

    А по поводу «узнать цену», так я не вижу, где там попап. Вижу вот это:

        function result(ths) {
             var tr = ths.parentNode.parentNode;
      
             var faultName = tr.getElementsByTagName("td")[0].innerHTML;
           document.getElementById("faultNm").value = faultName;
    
             var modelName = tr.getElementsByTagName("td")[3].innerHTML;
           document.getElementById("modelNm").value = modelName;
    };
    

    Значения в форму подставляются, а что должно произойти дальше — не понятно.

    Вся таблица узнать цену подгружается AJAXом. Всплывающее окно:
    http://joxi.ru/KAgJewVfEjY652
    класс который предоставляет popup builder http://joxi.ru/bmobLlKs3kwXEr

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

    посмотрите исходную страницу https://citi-master.ru/thinkpad-x301-wimax/ здесь все в таблице отрабатывает как надо, если ее подгружать целиком то попапы работают, но тогда и шапка с подвалом подтягиваются — не красиво мягко скажем)))

    Модератор Yuri

    (@yube)

    Теперь понятно, что должно быть. Я думаю, что обработчик кликов popup builder просто не рассчитан на обработку контента, загруженного аяксом (используется .click вместо .on(‘click’). Разбираться в минифицированных js недосуг, да и менять скрипты плагина неправильный путь. По-простому (.show()) тоже вряд ли получится, потому что, судя по всему, попапный div генерируется динамически.

    Если в документации на плагин не найдете способа программно активировать попап, чтобы прицепить этот вызов к function result(ths), боюсь, придется менять плагин на другой.

    У меня всё. Может, у коллег лучше получится.

    ну напоследок к Вам еще вопрос, может посоветуете аналоги popup builder, с которыми могло бы получиться?

    Модератор Yuri

    (@yube)

    Увы. Последние годы всё больше врукопашную приходилось воевать, поэтому адекватный плагин посоветовать не могу.

    Как я понимаю, к сожалению, ни у кого идей больше нет(((

    Идеи есть, но вам они откровенно не понравятся.

Просмотр 15 ответов — с 1 по 15 (всего 21)
  • Тема «Не срабатывает всплывающее окно после подгрузки AJAX» закрыта для новых ответов.