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));
надеюсь, ты понимаешь, что я делаю