Ankündigung

Einklappen
Keine Ankündigung bisher.

Nachgeladene Listenelemente können on click Event nicht feuern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Nachgeladene Listenelemente können on click Event nicht feuern

    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.

    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")
          });
        }
    });
    Hier der Code der Funktion loadDataInContent:

    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);
    	}
    }
    Wie kann ich es erreichen das die anmiate auch bei dynamisch nachgeladenen Listenelementen funktioniert?

    Gruß der Litter
    Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
    http://www.lit-web.de


  • #2
    kannst du das mal in ein jsfiddle bauen?

    Zitat von http://api.jquery.com/load/
    We could modify the example above to use only part of the document that is fetched:
    PHP-Code:
    $( "#result" ).load"ajax/test.html #container" ); 
    When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
    Standards - Best Practices - AwesomePHP - Guideline für WebApps

    Kommentar


    • #3
      Ist im Prinzip wie dieses http://jsfiddle.net/5FxKJ/2/, nur das Listenelemente nicht fest in den DIVs drin stehen sondern dynamsich nachgeladen werden.
      Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
      http://www.lit-web.de

      Kommentar


      • #4
        Also .animate kümmert es nicht, ob deine Liste dynamisch geladen wurde. Ich kann auch ehrlich gesagt nicht ganz nachvollziehen, was das Problem sein soll. Wahrscheinlich ist es nur ein logikfehler. Stell doch vielleicht erst mal fest, ob die Anforderungen separiert voneinander funktionieren. Dein fiddle funktioniert ja auch...
        Standards - Best Practices - AwesomePHP - Guideline für WebApps

        Kommentar


        • #5
          Guten Morgen.

          Ja das Fiddle funktioniert, aber da sind in den einzelnen Page Containern die Listen ja schon fest drin. Trage ich hier Listen fest ein funktioniert das auch, nur wenn die Listen nach bzw. bei einem Pageaufruf / animate dynamisch rein geladen werden funktioniert das nicht, wahrscheinlich weil die zu dem Zeitpunkt noch nicht bekannt ist.

          Im onclick Event wird ja eine Liste aus einem JavaScript Objekt in den Page Container hineingeladen und genau dann habe ich keinen Zugriff mehr auf das onclick Event nach dem laden und kann nicht mehr auf weitere Pages gelangen.

          Heißt, beim ersten laden werden die Liegenschaften gerendert und sind da. Dann klicke ich auf eine Liegenschaft, im onclick wird eine Liste aus dem JS Objekt in den neuen Page Container Liegenschaftsbereiche dynamisch hinein gerendert. Von dort aus kann ich nun nicht mehr zum Pagecontainer Gebäude klicken, dass onclick reagiert nicht mehr.
          Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
          http://www.lit-web.de

          Kommentar


          • #6
            Ich konnte den Fehler beheben. Ich musste dir Funktion animatePage() in der Funktion loadDataInContent mit aufrufen.

            Gruß Litter
            Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
            http://www.lit-web.de

            Kommentar


            • #7
              Das Problem beim Nachladen ist, dass die Daten zum Zeitpunkt von document.ready noch nicht vorhanden sind.
              Du musst allgemein das Event dann eben nochmal zu dem Zeitpunkt binden, wo du was nachlädst, z.B.:

              PHP-Code:
              $(document).ready(function(){
               $(
              '.bar').event("...");
               $(
              '.foo').click(function(){
                  
              // Hier werden bar Elemente nachgeladen
                  // ....
                  
                  // Hier musst du dann das Event nochmal neu binden, damit das die nachgeladenen Elemente auch mitkriegen:
               
              $('.bar').event("...");    
               });
              }); 
              Greetz
              No Sacrifice , no Glory--

              Kommentar


              • #8
                Sorry, ich stelle mich bei diesem Thema irgendwie doof an... Wenn ich einen minimal-approach bauen wollen wuerde, waere das dann sowas?

                PHP-Code:
                jQuery(function ($) {
                    var 
                onComplete = function () {
                        $(
                '#target').animate({ 'margin-left''-100%' }, 500'swing');
                    };

                    var 
                onClick = function () {
                        $(
                '#target').load('http://source/page #inner-element', { completeonComplete });
                    };
                    
                    $(
                document).on('click''ul.item-list > li > a'onClick);
                }); 
                Standards - Best Practices - AwesomePHP - Guideline für WebApps

                Kommentar


                • #9
                  Zitat von Sakron Beitrag anzeigen
                  Das Problem beim Nachladen ist, dass die Daten zum Zeitpunkt von document.ready noch nicht vorhanden sind.
                  Du musst allgemein das Event dann eben nochmal zu dem Zeitpunkt binden, wo du was nachlädst, z.B.:

                  PHP-Code:
                  $(document).ready(function(){
                   $(
                  '.bar').event("...");
                   $(
                  '.foo').click(function(){
                      
                  // Hier werden bar Elemente nachgeladen
                      // ....
                      
                      // Hier musst du dann das Event nochmal neu binden, damit das die nachgeladenen Elemente auch mitkriegen:
                   
                  $('.bar').event("...");    
                   });
                  }); 
                  Greetz

                  Oder man benutzt binds, damit sollte das auch bei nachgeladenen Container funktionieren. Aber eigentlich sollte das die on-Funktion die auch im Code vom TE drin steht auch bewerkstelligen.

                  Kommentar


                  • #10
                    Zitat von Kinger Beitrag anzeigen
                    Oder man benutzt binds...
                    Hast du denn wirklich Ahnung von der Materie? Bind kann nur auf Elemente angewendet werden, die es bereits im Dom gibt... mehr dazu
                    Standards - Best Practices - AwesomePHP - Guideline für WebApps

                    Kommentar


                    • #11
                      besteht da ein Unterschied zwischen :

                      .click direkt und .on( "click", function() .. ?

                      Ich liebe dieses Forum, da lernt man immer wieder was Neues.
                      No Sacrifice , no Glory--

                      Kommentar


                      • #12
                        Guck in die jQuery Dokumentation
                        --

                        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                        --

                        Kommentar


                        • #13
                          ai ai captain.
                          No Sacrifice , no Glory--

                          Kommentar


                          • #14
                            Oder man benutzt binds, damit sollte das auch bei nachgeladenen Container funktionieren.
                            Im Prinzip gilt immer:

                            DOM Events + dynamisches DOM = Event Delegation.
                            --

                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                            --

                            Kommentar


                            • #15
                              Hab doch schon den Link gepostet
                              Standards - Best Practices - AwesomePHP - Guideline für WebApps

                              Kommentar

                              Lädt...
                              X