0

Есть сайт на WordPress, тема ListingPro. Развернул функционал: заменил отображение обычных миниатюр объявлений на видео с YouTube. Получилось так, когда находишься на категории, подгружаются сразу много видео с YouTube, и что бы увеличить скорость загрузки страницы я использовал следующий скрипт:

 document.addEventListener("DOMContentLoaded",
    function() {
        var div, n,
            v = document.getElementsByClassName("youtube-player");
        for (n = 0; n < v.length; n++) {
            div = document.createElement("div");
            div.setAttribute("data-id", v[n].dataset.id);
            div.innerHTML = labnolThumb(v[n].dataset.id);
            div.onclick = labnolIframe;
            v[n].appendChild(div);
        }
    });

function labnolThumb(id) {
    var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
        play = '<div class="play"></div>';
    return thumb.replace("ID", id) + play;
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/ID?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    this.parentNode.replaceChild(iframe, this);
}

<div class="youtube-player" data-id="'.get_post_meta($post->ID, "video_cat", true).'" style="width:100%;height:152px"></div>

ID видео отображается через произвольное поле.

Всё работает хорошо, пока не начинают применять фильтр этих объявлений. Фильтры работают через Ajax. И после отображения отфильтрованных объявлений перестаёт работать данный скрипт. Подскажите, в чём может быть ошибка (причина)?

1 ответ 1

1

После ajax вам снова нужно запустить функцию

document.addEventListener("DOMContentLoaded", loadContent);

function loadContent(){
    var div, n,
        v = document.getElementsByClassName("youtube-player");
    for (n = 0; n < v.length; n++) {
        div = document.createElement("div");
        div.setAttribute("data-id", v[n].dataset.id);
        div.innerHTML = labnolThumb(v[n].dataset.id);
        div.onclick = labnolIframe;
        v[n].appendChild(div);
    }
}

function labnolThumb(id) {
    var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
        play = '<div class="play"></div>';
    return thumb.replace("ID", id) + play;
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/ID?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    this.parentNode.replaceChild(iframe, this);
}

// Например применили какой-то фильтр и выполнели ajax
$('.filter').on('click', function(e){
    e.preventDefault();
    $.ajax({
        /****/
        success: function(data){
            // Что-то делаете с данными
            // И вызываете функцию
            loadContent();
        }
    })
    return !1;
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.