JQM (jQueryMobile) 동적으로 추가 된 요소가 올바르게 표시되지 않고 CSS가 적용되지 않습니다.

Question

select 태그를 동적으로 추가하는 데 문제가 있습니다. CSS 및 추가 HTML 태그 (JQM 추가)가 적용되지 않습니다. html로 http://jsfiddle.net/UcrD8/4/

:

<div data-role="page" id="page_1"> 
    <div id="select_option_groups"> 
     <div data-role="fieldcontain"> 
      <select name="select_options_1"> 
       <option value="" selected>Please select an option</option> 
       <option value="foo">Foo</option> 
       <option value="bar">Bar</option> 
      </select> 
     </div> 
    </div> 
</div> 

JS :

$(function(){ 
    var counter = 2; 
    var onChange = function(e){ 
     val = $(':selected',this).val() || ''; 
     if (val != ''){ 
      // they may be able to toggle between valid options, too. 
      // let's avoid that using a class we can apply 
      var c = 'alreadyMadeASelection'; 
      if ($(this).hasClass(c)) 
       return; 
      // now take the current select and clone it, then rename it 
      var newSelect = $(this) 
       .clone() 
       .attr('name','select_options_'+counter) 
       .attr('id','select_options_'+counter) 
       .appendTo('#select_option_groups') 
       .change(onChange); 
      $(this).addClass(c); 
      counter++; 
     } else { 
      var id = $(this).attr('name').match(/\d+$/), parent = $(this).parent(); 
      $(this).remove(); 

      // re-order the counter (we don't want missing numbers in the middle) 
      $('select',parent).each(function(){ 
       var iid = $(this).attr('name').match(/\d+$/); 
       if (iid>id) 
        $(this).attr('name','select_options_'+(iid-1)); 
      }); 
      counter--; 
     } 
    }; 
    $('#select_option_groups select').change(onChange); 
}); 

나는 시도했다 : 여기

내가 새로운 선택 태그를 추가 해요 방법의 예입니다

// this gets the select tags to stack but still no CSS 
$(newSelect).fieldcontain('refresh'); 

// does nothing 
$(newSelect).page(); 

// does nothing 
$('#page_1').page(); 

Answer 1

.selectmenu('refresh');이 작동하지 않는 이유는 모르지만 페이지의 경우 요소에 한 번 사용할 수 있습니다. 그 다음에는 다음에 요소를 건너 뜁니다.

1. 클론 (매개 변수없이 복제) 물건을 추가하기 전에 선택
2. , 그것은 다시 DOM에
3. 전화 .page() 또는 .selectmenu() 거기에 넣어 원래
4. 가 복제 된 요소
5. 에 물건을 추가, 제거 또는 포함 된 요소에 .page()으로 전화하십시오.

도움이 될 것입니다. 그렇지 않으면 처음부터 새 select 요소를 만들고 원래 요소에서 옵션을로드하여 새 요소를 추가 한 다음 계속하십시오.

[편집]

위의 내용은 단지 추측에 불과합니다. 귀하의 코드는 그대로입니다. 단지 .selectmenu() 작업 코드에 단일 통화를 필요로 :

http://jsfiddle.net/UcrD8/45/

Answer 2

$(newSelect).selectmenu('refresh'); 

또는 강제하는 이것은 그것의 재 구축이 시도

$(newSelect).selectmenu('refresh', true); 

을하고 일을하는 경우 알려 주시기 바랍니다.

Answer 3

가 제대로 렌더링 할 개체 (들)의 부모에 ("생성") .trigger 사용해야합니다.

확인은 다음 링크 :

http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

다음과 같은 대답은 : https://stackoverflow.com/a/11054451/487812