Guten Morgen an alle,
ich habe ein Page animate mittels JQuery.
Der Inhalt der Pages wird aber beim Klick auf ein Listenelement neu geladen.
Nun funktioniert das nur bei der ersten Liste.
Kurzes Beispiel.
Eine Anwendung wird zusammengebaut und als aller erstes hat man eine Liste mit Liegenschaften.
Klick man nun auf eine Liegenschaft, gelangt man via animate zu einer Page wo dann alle zur Liegenschaft gehörenden Liegenschaftsbereiche erscheinen. Die Liegenschaftsbereiche werden dynamisch aus deinem JavaScript Objekt geladen, je nach Liegenschaft eben.
Wenn ich nun auf einen Liegenschaftsbereich klicken will um zu den Gebäuden die zu diesem Bereich gehören zu kommen, funktioniert das nicht mehr.
Hier der Code für das animate.
Hier der Code der Funktion loadDataInContent:
Wie kann ich es erreichen das die anmiate auch bei dynamisch nachgeladenen Listenelementen funktioniert?
Gruß der Litter
ich habe ein Page animate mittels JQuery.
Der Inhalt der Pages wird aber beim Klick auf ein Listenelement neu geladen.
Nun funktioniert das nur bei der ersten Liste.
Kurzes Beispiel.
Eine Anwendung wird zusammengebaut und als aller erstes hat man eine Liste mit Liegenschaften.
Klick man nun auf eine Liegenschaft, gelangt man via animate zu einer Page wo dann alle zur Liegenschaft gehörenden Liegenschaftsbereiche erscheinen. Die Liegenschaftsbereiche werden dynamisch aus deinem JavaScript Objekt geladen, je nach Liegenschaft eben.
Wenn ich nun auf einen Liegenschaftsbereich klicken will um zu den Gebäuden die zu diesem Bereich gehören zu kommen, funktioniert das nicht mehr.
Hier der Code für das animate.
Code:
$('.load-page').on ('click', function(event) { var load = $(this).data ('load') || ''; var target = container.find ('.' + load); if (target.length) { var position = target.position().left + container.scrollLeft (); container.animate ({ scrollLeft : position } , 'slow' , function () { updateActive (target); }); filledApplicationBredcrumb($(this)); loadDataInContent({ id : $(this).data("id"), load : $(this).data("load"), parent : $(this).parent().parent().attr("id") }); } });
Code:
var loadDataInContent = function(settings) { var dataList = (typeof $applicationData.application[settings.load][settings.id] != "undefiend") ? $applicationData.application[settings.load][settings.id] : undefined; var backBtn = $(".back_btn"); backBtn.attr("data-back", settings.parent); backBtn.attr("data-backId", settings.id); if (typeof dataList != "undefined") { var elemUl = $("<ul>"); $.each(dataList, function(key, elem) { var elemLi = $("<li>"); if (typeof elem.attributes != "undefined" && Object.keys(elem.attributes).length > 0) { $.each(elem.attributes, function(attrKey, attr) { elemLi.attr(attrKey, attr); }); } if (typeof elem.classes != "undefined" && elem.classes.length > 0) { $.each(elem.classes, function(clKey, cl) { elemLi.addClass(cl); }); } elemLi.text(elem.name); elemUl.append(elemLi); }); $("#" + settings.load).append(elemUl); } }
Gruß der Litter
Kommentar