이미지가 jquery 모바일 이미지 팝업에로드되지 않았습니다.

Question

앵커 태그에서 호출 할 때 작동합니다.

var surl = "http://192.168.1.233"; 
$("#imgLink").html("<a href='"+ surl + "/leave/" + filename + "'>" + filename + "</a>"); 

그러나 jquery 모바일 이미지 팝업에서 호출하면 더 이상 작동하지 않습니다.

$("#imgLink").html("<a href='#popupPhoto' data-rel='popup' data-position-to='window' data-role='button' data-inline='true' data-transition='fade'>"+ 
              filename + "</a>"+ 
              "<div data-role='popup' id='popupPhoto' data-overlay-theme='a' data-theme='d' data-corners='false'>"+ 
        "<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a>"+ 
        "<img class='popphoto' src='"+ surl + "/leave/" + filename +"' style='width:150px; height:150px;'></div>"); 

이미지 대신 팝업 프레임이 표시되지만 물음표가 표시됩니다.

Answer 1

팝업 마크 업은 콘텐츠 외부로 이동하지만 여전히 페이지 내에 있습니다. 여기

는 DEMO

링크 버튼을 마크 업 및 2 개 개의 별도 변수 팝업 마크 업을 구축합니다. 컨테이너 (#imgLink)에 링크를 추가하고 팝업을 페이지에 추가하십시오. 마지막으로 페이지에서 새로 고침을 트리거합니다.

$(document).on("pageinit", "#page1", function(){ 
    var filename = "http://lorempixel.com/150/150/sports"; 

    var markup = '<a href="#popupPhoto" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="fade">' + filename + '</a>'; 

    var popup = '<div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="d" data-corners="false"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="' + filename + '" style="width:150px; height:150px;"></div>'; 

    $("#imgLink").empty().append(markup); 
    $("#page1").append(popup).trigger('create'); 
});