>웹 프론트엔드 >JS 튜토리얼 >jquery mobile은 요소를 동적으로 추가한 후 올바르게 렌더링할 수 없습니다.

jquery mobile은 요소를 동적으로 추가한 후 올바르게 렌더링할 수 없습니다.

WBOY
WBOY원래의
2016-05-16 16:57:001283검색

jquerymobile이 동적으로 추가한 후 일부 요소가 올바르게 렌더링되지 않는 문제에 대한 솔루션:
listview: jq(".detail").listview("refresh");
추가 div 또는 기타: .trigger( "create" ) 추가;
=================================== ====== ================================

jqm은 페이지를 초기화할 때 data-xxx에 따라 jqm 속성과 클래스를 각 요소에 삽입합니다. 페이지가 초기화된 후 요소가 동적으로 삽입되면 jqm 스타일이 삽입되지 않아 표시가 보기 흉한 경우가 많습니다. 이를 확인하기 위해 브라우저의 개발 도구를 사용할 수 있습니다. 일부 요소에는 더 많은 클래스가 있지만 동적으로 삽입된 요소 코드는 작성한 것과 동일합니다.

동적으로 삽입된 요소에 jqm 스타일을 적용하려면 jqm 객체에서 생성 이벤트를 트리거할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$(selector).trigger('create');
create 이벤트는 다양한 용도로 사용되며 버튼 삽입과 같이 존재하지 않는 요소(원시 마크업?)일 수도 있습니다.

코드 복사 코드는 다음과 같습니다:
$('dy 버튼'). appendTo('#content').trigger('create ');

일부 개체는 목록 보기 및 플립 토글과 같은 새로 고침 방법을 제공합니다. create와의 차이점은 새로 고침 메서드가
과 같은 기존 개체에 대해 작동해야 한다는 것입니다. $('ul').listview('refresh') 및 새로 고침은 새로 추가된 요소만 업데이트합니다. 예를 들어 목록 보기에 최근에 추가된 요소는 업데이트되고 원본 요소는 변경되지 않습니다. (제가 잘못 이해한 것인지는 모르겠지만 일부는 테스트를 거치지 않았습니다. 원본 텍스트

http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

jqm 스타일을 사용하지 마세요:

jqm이 요소를 자동으로 초기화하지 않도록 하려면 두 가지 방법이 있습니다. data-role="none" 속성을 추가하거나 mobileinit 이벤트에서 keepNative 옵션을 구성하세요.


코드 복사 코드는 다음과 같습니다. 다음과 같습니다:
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea .bar";
});

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.