Инициирование jQuery Script |Работает при размещении в консоли, но не при размещении в коде сайта

Question

У меня есть некоторый код, который просто откроет окно, копируемое на изображении, по которому щелкают.

Мне не очень нужна помощь с кодом, и вам не нужно ничего знать омакет или создание изображения коробки. Просто поверьте, этот код работает.

У меня есть пара функций:

var caseStudySlider = $('.case-study-slider-image');
var productImageZoom = $('.photo');
if (caseStudySlider.length) {
    caseStudySlider.click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '').replace(/\"/gi, "");
        var targetZoomer = $('#image-zoomer');
        targetZoomer.attr("src", bg);
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {} else {
            zoomedImage.addClass('open');
        }
    });
}
if (productImageZoom.length) {
    productImageZoom.click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url("', '').replace('")', '').replace(/\"/gi, "");
        var targetZoomer = $('#image-zoomer');
        targetZoomer.attr("src", bg);
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {} else {
            zoomedImage.addClass('open');
        }
    });
}
if (productImageZoom.length || caseStudySlider.length) {
    $('.close-zoomed-image').click(function () {
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {
            zoomedImage.removeClass('open');
        } else {}
    });
}

Они размещены внутри тега скрипта и запускаются из нижнего колонтитула сайта WordPress. Для этого я использую плагин 'header & footer scripts', чтобы поместить фрагменты скрипта в нижний колонтитул.

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

var caseStudySlider = $('.case-study-slider-image');
var productImageZoom = $('.photo');

Код работает для одной из страниц caseStudySlider. Но не работает для страниц продукта. Однако, если я скопирую и вставлю код в консоль. Это работает на обеих страницах !!!

Может кто-нибудь помочь мне определить / выделить причины, по которым это может быть так?

Дополнительный код, который уместен, но не необходим для ответа на вопрос, который я не задаю 't думать:

Включите поле для заполнения:

<div id="image-zoom-contain" class="">
    <a href="javascript:void(0)" class="close-zoomed-image box-link"></a>
    <div class="image-zoom-inner">
        <img src="" id="image-zoomer" class="image-zoomer" alt="zoomed image">
    </div>
</div>

CSS:

/* ZOOMABLE IMAGE */
.case-study-slider-image,
.photo {
    cursor: zoom-in;
}
#image-zoom-contain {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000000;
}
    #image-zoom-contain.open {
        display: block!important;
    }
.image-zoom-inner {
    width: auto;
    height: calc(100% - 80px);
    margin: 20px auto;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 151;
}
.image-zoomer {
    max-width: 100%;
    max-height: 100%;
    background-color: rgba(7,30,68,1);
    padding: 10px;
    border-radius: 10px;
}
/* END ZOOMABLE IMAGE */

Огромная благодарность за любые вкладчики, Джейсон.

Answer 1

Что бы вы ни делали, вы делаете это слишком рано. Используйте этот подход

$(document).ready(function(){
  // Paste all of your jquery related code here
})

Обновленный ответ:

$(document).ready(function(){
   setTimeout(function(){
       // Paste all of your jquery related code here
   }, 500)
})

значение 500 в мс

Answer 2

Вероятно, ваш <div class="photo"> рендер после загрузки страницы

Из-за этого вы можете попробовать заменить

productImageZoom.click(function () { 

на

$(document).on("click",'.photo',function() {

Интересно, productImageZoomдлина, если она не работает

var productImageZoom = $('.photo');

console.log(productImageZoom.length);