JQuery Mobile 1.3 Выберите динамическое обновление меню

Question

Привет, я использую JQM 1.3 и JQuery 1.9.1 ... Я пытаюсь получить динамический selectmenu, работающий без решения.

Сначала я создаю selectmenu с createDocument (div ...) и .setAttribute (id, ...) в событии pagebeforeshow. Тогда я использовал много вариаций первой линии, второй линии и комбинированные ..

$("#select-keywords-list").selectmenu(); 
$("#select-keywords-list").selectmenu("refresh"); 

ничего не работал еще для меня ..

после того, как я добавил, что я слушаю его в Domready ($ (# страница) .ready) для события изменения. В браузере он работает очень хорошо, но по телефону я просто не могу заставить его работать. Надеюсь, кто-нибудь может мне помочь.

Я также попытался родное меню истинный и ложный ..

спасибо

ТЗ

Answer 1

Рабочего примера: больше http://jsfiddle.net/Gajotres/dEXac/

$(document).on('pagebeforeshow', '#index', function(){  
    // Add a new select element  
    $('<select>').attr({'name':'select-choice-1','id':'select-choice-1','data-native-menu':'false'}).appendTo('[data-role="content"]'); 
    $('<option>').html('Select option!').appendTo('#select-choice-1'); 
    $('<option>').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1'); 
    $('<option>').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');  
    // Enhance new select element 
    $('select').selectmenu(); 

    $(document).on('change', '#select-choice-1', function(){  
     alert($(this).find("option:selected").text()); 
    });   
}); 

Одна вещи, не использовать документ готовые с помощью jQuery Mobile, они не работают правильно вместе. Вместо этого используйте событие pageinit. Если вы хотите узнать больше об этом смотрите здесь: jQuery Mobile: document ready vs page events

Answer 2

я знаю с шаблонизатор его может быть проще, но я попробовал этот способ

  function renderItemsKeywords(results) { 
     var elementRoot = document.createDocumentFragment(); 
     var elementDiv = document.createElement("div"); 
     elementDiv.setAttribute("data-role", "fieldcontain"); 

     var elementL = document.createElement("label"); 
     elementL.setAttribute("for", "select-keywords-list"); 
     elementL.setAttribute("class", "select"); 
     elementL.appendChild(document.createTextNode("Wähle Eintrag:")); 

     var elementSel = document.createElement("select"); 
     elementSel.setAttribute("name", "select-keywords-list"); 
     elementSel.setAttribute("id", "select-keywords-list"); 
     elementSel.setAttribute("data-native-menu", "true"); 

     var elementOptD = document.createElement("option"); 
     elementOptD.setAttribute("data-placeholder", "true"); 
     elementOptD.appendChild(document.createTextNode("Wähle Eintrag"));   
     elementSel.appendChild(elementOptD); 

     var allKeywords = $().checkKeywords(results); 

     $.each(allKeywords, function(i, item) { 
      var elementOptAll = document.createElement("option"); 
      elementOptAll.setAttribute("value", item); 
      elementOptAll.appendChild(document.createTextNode(item)); 
      elementSel.appendChild(elementOptAll); 
     }); 

     //alert(elementSel.length()); 

     elementDiv.appendChild(elementL); 
     elementDiv.appendChild(elementSel); 

     var elementDivKey = document.createElement("div"); 
     elementDivKey.setAttribute("id", "keylist"); 

     elementRoot.appendChild(elementDiv); 
     elementRoot.appendChild(elementDivKey); 

     return elementRoot; 
    }; 

, чем другая часть

      case 'keywords': 

       html = renderItemsKeywords(itemData); 

       $header.find("h1").html("Title"); 
       $content.html(html); 
       $page.page(); 
       $footer.find(":jqmData(role=navbar)").navbar(); 
       $content.find(":jqmData(role=listview)").listview(); 


       $("#select-keywords-list").selectmenu(); 
       $("#select-keywords-list").selectmenu("refresh"); 
       break; 
      } 
      $.mobile.changePage($(this)); 

надеюсь, что вы понимаете, что делает im