Невозможно получить события div click для работы на мобильном устройстве. - PullRequest
Новая
       20

Невозможно получить события div click для работы на мобильном устройстве.

0 голосов
/ 09 февраля 2020

Я генерирую изображения для слайд-шоу с скользящим движением, используя ajax вызов для 20 изображений Instagram. Поместите цитату над каждой картинкой (.insta-caption), и я хочу дать пользователю возможность переключать видимость цитаты. Приведенное ниже событие нажатия отлично работает в браузере (также и в мобильном представлении), использую ли я курсор или касание. Это не работает на мобильном телефоне.

Я попытался переместить код в скрипт, вызываемый после вызова ajax. Я пробовал различные сенсорные события на jquery и ванили js. Я могу получить предупреждение для запуска на мобильном телефоне, но не могу изменить прозрачность. 

data.data.forEach(function (instaPost, i) {
    stdImgUrl = instaPost.images.standard_resolution.url
    stdImgUrlThumb = instaPost.images.thumbnail.url
    instaCaption = instaPost.caption.text

    $(".gallery").append("<div class='item'><img src='"
        +stdImgUrlThumb
        +"' alt='instagram photo' /></div>");


    $(".gallery2").append("<div class='item'><a target='_blank'><img src='"
    +stdImgUrl
    +"' alt='instagram photo' /></a>"+
        "<div class='insta-link'><a href='https://www.instagram.com/snowy_vt/' target='_blank'><img class='insta-img' src='./images/instagram.png'></img></a></div>"+
        "<div class='insta-quote iq"+i+"'><i class='fas fa-quote-left'></i></div>"+
        "<div onclick='' class='insta-caption iq"+i+"'><p onclick='' class='insta-caption-text'>"+instaCaption+"</p></div>"+
        "</div>");

    $( '.iq'+i ).click(function() {
        toggleCaption();
    });

})

function toggleCaption (){
    currentOpacity = $(".insta-caption").css("opacity");
    if (currentOpacity == .9){
        $(".insta-caption").css("opacity","0");
    } else if (currentOpacity == 0){
        $(".insta-caption").css("opacity",".9");
    }
}
...