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

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

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

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

у меня пока ничего не получалось..

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

Я также попробовал родное меню true и false..

благодарю вас

ТЗА

2 ответа

Решение

Рабочий пример: 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: документ готов против событий на странице

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

            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));

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

Другие вопросы по тегам