JQM (jQueryMobile) Dynamisch hinzugefügte Elemente nicht korrekt angezeigt und die CSS wird nicht angewendet
Ich habe ein Problem mit dem hinzufügen einer select-tag dynamisch, CSS und weitere html-tags (das JQM-add) werden nicht angewendet.
Hier ist ein Beispiel, wie ich hinzufüge, die neue select-tag: http://jsfiddle.net/UcrD8/4/
HTML:
<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);
});
Ich versucht habe:
//this gets the select tags to stack but still no CSS
$(newSelect).fieldcontain('refresh');
//does nothing
$(newSelect).page();
//does nothing
$('#page_1').page();
InformationsquelleAutor Phill Pafford | 2011-03-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich habe keine Ahnung, warum
.selectmenu('refresh');
nicht funktioniert, aber als für - Seite-Sie können es verwenden, Sie einmal auf ein element. Danach überspringt das element der nächsten Zeit..page()
oder.selectmenu()
auf, oder rufen Sie.page()
auf das element, das Sie enthält.Sollte helfen.
Wenn nicht, dann versuchen Sie, erstellen Sie eine neue select-Elements from scratch " und laden Sie es mit den Optionen aus dem original, und neue hinzufügen und dann auf fertig stellen.
[Bearbeiten]
Das oben war nur eine Vermutung. Dein code ist ok so wie es ist. muss nur einen einzigen Anruf zu
.selectmenu()
Arbeiten code:
http://jsfiddle.net/UcrD8/45/
Danke für den Hinweis it out. Es wird sehr nützlich für mich zu wissen, 1.5 unterscheidet sich von 1.5.1 in jqm unterstützt. Ich hatte nicht erwartet, dass
InformationsquelleAutor naugtur
Versuchen Sie dies:
oder diesem wird die Kraft der rebuild:
bitte lassen Sie mich wissen, ob es geklappt hat.
Getestet habe ich es, aber ich habe nicht gefunden, eine Lösung noch nicht, sorry.
Vielen Dank für Ihre Bemühungen +1 für nicht aufgeben
Ich hatte ein problem mit dem ersten Element in der select nicht angezeigt werden, und die selectmenu('refresh') hat das Problem gelöst. Danke!!!
InformationsquelleAutor Tim
Verwenden sollten .trigger("create") auf die übergeordnete Objekt(en), die Sie richtig machen.
Überprüfen Sie den folgenden link:
http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html
Sowie die folgende Antwort:
https://stackoverflow.com/a/11054451/487812
InformationsquelleAutor the_new_mr