저는 JQuery Mobile을 처음 사용하고 Jquery는 누구든지 문제를 해결하는 데 도움을 줄 수 있습니다.
링크를 클릭하면 동적으로 페이지가 생성된다는 점에서 목록보기가 있습니다. 내 문제는 목록보기에서 다른 링크를 클릭하면 다른 페이지를 만들고 해당 페이지를 표시하지만 이전에 생성 된 페이지의 코드는 방화범이 표시하는 페이지 소스에 여전히 표시된다는 것입니다.
이것은 내 HTML 목록입니다
<ul data-role="listview" id="device_list">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-main">Main panel page</a></li>
<li><a href="#" id="v1" onclick="open_device_player(v1)></a></li>
<li><a href="#" id="v2" onclick="open_device_player(v2)></a></li>
<li><a href="#" id="v3" onclick="open_device_player(v3)></a></li>
<li><a href="#" id="v4" onclick="open_device_player(v4)></a></li>
</ul>
이것은 내 Jquery 함수입니다.
function open_device_player(device_id)
{
var newPage = "<div data-role='page' id='"+device_id+"'><div data-role=header><h1> Device Page </h1></div><div data-role=content><img src='localhost/mjpg/"+device_id+"' width='320'></div></div>";
$("body").append(newPage);
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#"+device_id );
}
다음과 같이 할 수 있습니다.
function open_device_player(device_id)
{
var newPage = "<div data-role='page' id='"+device_id+"'><div data-role=header><h1> Device Page </h1></div><div data-role=content><img src='localhost/mjpg/"+device_id+"' width='320'></div></div>";
$("body").append(newPage);
$(document).on('pagehide', '#'+device_id,function () {
$(this).off('pagehide');
$(this).remove();
});
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#"+device_id );
}
이런 식으로 동적 페이지를 만들 때 페이지 숨김 이벤트를 즉시 바인딩 합니다. 마지막으로 동적으로 생성 된 페이지를 떠나면 set pagehide 이벤트 를 트리거 하여 DOM에서 페이지를 제거하고 바인딩 된 페이지 이벤트를 제거합니다.
이것도보세요 :
$(document).on('pagehide', '#'+device_id,function () {
$(this).remove();
$(this).off('pagehide');
});
이 페이지 이벤트 바인딩 방법은 페이지가 DOM에 있는지 여부에 관계가 없습니다. 언급 된 페이지가 DOM 내부에 있고 떠나는 즉시 트리거됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다