Ivory: JQuery dynamische Buttons funktionieren nicht

Hallo zusammen

Leider habe ich mit Jquery nicht allzuviele Erfahrungen und bin auf ein Problem gestossen das mir nicht in den Kopf gehen will.

Was funktioniert?

  
<button value="7" id="Kaufen1">Kaufen</button>  

Erstellt man direkt in die HTML Datei die Button kann dieser auch wunderbar angesteuert werden via:

  
//Beim Klick auf ID Kaufen1 löse diese Funktion aus  
$('#Kaufen1').click(function(){  
                   alert($(this).id);  
                   alert("Ein Test"+$(this).val());  
                   socket.emit('AHKauf', $(this).val(), function(){  
                   $('#nickWrap').hide();  
                   $('#contentWrap').show();  
                   });  
               });  

Was funktioniert nicht?

Erstellt man jetzt dynamische Buttons, also von JS generiert bsp:

  
if(result[a].MetallWunschMenge === null){  
                MetallWunschMenge[a] = "";  
            }else{  
                MetallWunschMenge[a] = "Sucht: "+result[a].MetallWunschMenge+" Metall &lt;button id=&quot;Kaufen"+a+"&quot; value=&quot;"+result[a].ID+"&quot;&gt;Kaufen&lt;/button&gt;";  
            }  
            Struktur[a] = Player[a]+HolzMenge[a]+HolzWunschMenge[a]+SteinMenge[a]+SteinWunschMenge[a]+MetallMenge[a]+MetallWunschMenge[a]+"</br>";  
        }  

Das ganze befindet sich in einer for Schleife. Das Ergebnis der ganzen funktion ist dann:
s bietet: 500 Holz Sucht: 5000 Stein &lt;button id=&quot;Kaufen0&quot; value=&quot;42&quot;&gt;Kaufen&lt;/button&gt;</br>
etc...

Die Funktion erstellt ein Mehrdimensionen Array! [Array[Array]]

Kommen wir zum wesentlichen Teil:

data = s bietet: 500 Holz Sucht: 5000 Stein &lt;button id=&quot;Kaufen0&quot; value=&quot;42&quot;&gt;Kaufen&lt;/button&gt;</br>

players = Anzahl Einträge in der Datenbank

In dieser Funkion wird das Array durchsucht und alle Asci-Zeichen werden mit dem gewünschten Zeichen ersetzt. Danach sieht das so aus:
s bietet: 500 Holz Sucht: 5000 Stein <button id="Kaufen0" value="42">Kaufen</button></br>

Danach wird das Array ins HTML geladen:
$AuktionenAnzeige = $('#AuktionenAnzeige'); // ID von dem AnzeigeFenster, wird weiter oben deklariert

$AuktionenAnzeige.html(AuktionsAusgaben);

  
 socket.on('AuktionsLagerUpdater', function(data, players){  
  
  
                   htmlspecialchars(data);  
  
                    function htmlspecialchars(data) {  
                    AuktionsAusgaben = [];  
                    var a = data;  
                    //Durchsuche das Multi Array und schreibe replaces good job!  
                    if($.isArray(a)) {  
                    //alert("a is an array!");  
                    for(b=0; b < players; b++){  
                        var NewString = a[b];  
                        console.log(NewString);  
                        if (typeof(NewString) == "string") {  
                        data = NewString.replace(/&amp;/g, "&");  
                        data = data.replace(/&quot;/g, '"');  
                        data = data.replace(/&#039;/g, "'");  
                        data = data.replace(/&lt;/g, "<");  
                        data = data.replace(/&gt;/g, ">");  
                        console.log("Erstes Array nach bearbeitung: "+data);  
                        AuktionsAusgaben[b] = data;  
  
                        //return data;  
                        }  
                    }  
                }  
  
                }  
  
                    //console.log(AuktionsAusgaben);  
                   //document.getElementById("AktionsHausKauf").innerHTML = AuktionsAusgaben; JS  
                   //$AuktionenAnzeige.html(AuktionsAusgaben); //JQUERY  
  
                        $AuktionenAnzeige.html(AuktionsAusgaben);  
	            //$AuktionenAnzeige.html(AuktionsAusgaben);  
  
                    $('#nickWrap').hide();  
                    $('#contentWrap').show();  
                    //$AuktionenAnzeige.text(data);  
                   //$AuktionenAnzeige.html(data);  
                });  

Die Buttons werden zwar im HTML angezeigt aber wen man drauf klickt passiert nichts...
Im code ist die click Funktion definiert:

  
$('#Kaufen1').click(function(){  
                   alert($(this).id);  
                   alert("Ein Test"+$(this).val());  
                   socket.emit('AHKauf', $(this).val(), function(){  
                   $('#nickWrap').hide();  
                   $('#contentWrap').show();  
                   });  
               });  
  
$('#Kaufen0').click(function(){  
                   alert($(this).id);  
                   alert("Ein Test"+$(this).val());  
                   socket.emit('AHKauf', $(this).val(), function(){  
                   $('#nickWrap').hide();  
                   $('#contentWrap').show();  
                   });  
               });  

Was mache ich falsch, hat jemmand eine Idee?
Was meine Idee war das möglicherweise die Buttons nicht im DOM existieren was aber auch wieder komisch ist da diese ja angezeigt werden.

Falls Ihr dies Testen wollt, könnt Ihr unter der URL: http://80.219.158.147:1339/ einfach ma die Buttons bei Auktionsliste testen. (Das wären die generierten)
Nicht Dynamische Buttons funktionieren wie erwähnt einwandfrei...

Vielen Dank für eure Hilfe!

Gruss Ivory

  1. Meine Herren!

    Deine Codeschnipsel akribisch durchzulesen war mir ehrlich gesagt zu anstrengend. Aber mein Tipp ins Blaue: Event-Delegation ist dein Sichtwort.

    --
    “All right, then, I'll go to hell.” – Huck Finn
    1. Habs auch nicht durchgelesen ;-)

      Viele Grüße aus LA

      --
      ralphi
    2. Meine Herren!

      Deine Codeschnipsel akribisch durchzulesen war mir ehrlich gesagt zu anstrengend. Aber mein Tipp ins Blaue: Event-Delegation ist dein Sichtwort.

      Ich bin es mir gerade am durchlesen, vielen Dank für dein Anreiz.

      Gruss Ivory

  2. Hi,

    JQuery dynamische Buttons funktionieren nicht

    das Problem hatte ich auch.
    Ich denke es gibt 3 Möglichkeiten:

    1. Old school - document.getElementsByClassName('xx');

    2. mit dem alten JQuery – also mit:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    und
    $("#xx").live('change click', function (e) { ..

    3. ‘Neue’ Funktionen
    $("#xx").on() oder $("#xx").bind()
    oder was auch immer und schreibst mir dann die Lösung ;-)

    wenn was nicht stimmt (schreib ich aus dem Gedächtnis), wirds bestimmt einer korrigieren. :-0

    Viele Grüße aus LA

    --
    ralphi
    1. Hi,

      JQuery dynamische Buttons funktionieren nicht

      das Problem hatte ich auch.
      Ich denke es gibt 3 Möglichkeiten:

      1. Old school - document.getElementsByClassName('xx');

      Das habe ich mir bereits auch überlegt, aber leider weiss ich nicht wie ich dann nur über JS und nicht Jquery den socket ansprechen soll.

      1. mit dem alten JQuery – also mit:
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        und
        $("#xx").live('change click', function (e) { ..

      Dies geht leider auch nicht da diese Version veraltet ist und nicht kompatibel ist.

      1. ‘Neue’ Funktionen
        $("#xx").on() oder $("#xx").bind()
        oder was auch immer und schreibst mir dann die Lösung ;-)

      wenn was nicht stimmt (schreib ich aus dem Gedächtnis), wirds bestimmt einer korrigieren. :-0

      Viele Grüße aus LA

      3. Leider auch kein Erfolg...

      Danke trozdem

      Gruss Ivory

  3. Tach!

    Die Buttons werden zwar im HTML angezeigt aber wen man drauf klickt passiert nichts...
    Was mache ich falsch, hat jemmand eine Idee?
    Was meine Idee war das möglicherweise die Buttons nicht im DOM existieren was aber auch wieder komisch ist da diese ja angezeigt werden.

    Vielleicht ist die Reihenfolge nicht richtig. jQuery gibt keine Meldung, wenn es Dingen etwas hinzufügen soll, die (noch) nicht da sind.

    dedlfix.

    1. Tach!

      Die Buttons werden zwar im HTML angezeigt aber wen man drauf klickt passiert nichts...
      Was mache ich falsch, hat jemmand eine Idee?
      Was meine Idee war das möglicherweise die Buttons nicht im DOM existieren was aber auch wieder komisch ist da diese ja angezeigt werden.

      Vielleicht ist die Reihenfolge nicht richtig. jQuery gibt keine Meldung, wenn es Dingen etwas hinzufügen soll, die (noch) nicht da sind.

      dedlfix.

      Hi kannst es das möglicherweise etwas genauer beschreiben?

      Vielen Dank

      Gruss Ivory

    2. Tach!

      Vielleicht ist die Reihenfolge nicht richtig. jQuery gibt keine Meldung, wenn es Dingen etwas hinzufügen soll, die (noch) nicht da sind.

      Wenn ich einen Breakpoint in die Zeile

      $('#Kaufen0').click(function(){

      setze, und dann auf der Konsole $('#Kaufen0') ausführe, gibt es eine leere Menge zurück. Also ist kein Button da.

      Informier dich mal, wie man in deinem Browser debuggen kann. Breakpoints setzen und dann Variableninhalte anschauen oder Ausdrücke berechnen lassen ist ein Vorgehen beim Fehlersuchen, was man können sollte.

      dedlfix.

      1. Tach!

        Vielleicht ist die Reihenfolge nicht richtig. jQuery gibt keine Meldung, wenn es Dingen etwas hinzufügen soll, die (noch) nicht da sind.

        Wenn ich einen Breakpoint in die Zeile

        $('#Kaufen0').click(function(){

        setze, und dann auf der Konsole $('#Kaufen0') ausführe, gibt es eine leere Menge zurück. Also ist kein Button da.

        Informier dich mal, wie man in deinem Browser debuggen kann. Breakpoints setzen und dann Variableninhalte anschauen oder Ausdrücke berechnen lassen ist ein Vorgehen beim Fehlersuchen, was man können sollte.

        dedlfix.

        Moin dedlfix

        Das kein Button existiert ist mir bereits aufgefallen, ansonst würde ja logischerweise der Button funktionieren... ( Ich habe eine konsole und sehe was passiert und was nicht).
        Ich Arbeite zusätzlich mit NodeJs und Socket.io ;)

        Daher ist mir ja uch aufgefallen das nur dynamische Inhalte nicht funktionieren...

        Im Firebug scheint das HTML in Ordnung zu sein und wie ich erwähnte bin ich kein Jquery Experte. Ich habe 2 Tage nach dem Fehler gesucht aber nichts wirklich brauchbares gefunden...

        Gruss Ivory

        1. Tach!

          Das kein Button existiert ist mir bereits aufgefallen, ansonst würde ja logischerweise der Button funktionieren...

          Zu dem Zeitpunkt des jQuery-Click-Zuweisens existiert er noch nicht - das ist der bedeutende Teil. Wenn der Button nicht irgendwann im DOM eingehängt würde, wäre er auch nicht sichtbar.

          Wenn die Seite fertig geladen ist und ich in der Konsole

          $('#Kaufen0').click(function(){ alert('klick') })

          eingebe, dann reagiert der Button wunderbar. jQuery kann nur dann ein Ereignis an Elemente binden, wenn sie da sind, nicht eher.

          dedlfix.

          1. Tach!

            Das kein Button existiert ist mir bereits aufgefallen, ansonst würde ja logischerweise der Button funktionieren...

            Zu dem Zeitpunkt des jQuery-Click-Zuweisens existiert er noch nicht - das ist der bedeutende Teil. Wenn der Button nicht irgendwann im DOM eingehängt würde, wäre er auch nicht sichtbar.

            Wenn die Seite fertig geladen ist und ich in der Konsole

            $('#Kaufen0').click(function(){ alert('klick') })

            eingebe, dann reagiert der Button wunderbar. jQuery kann nur dann ein Ereignis an Elemente binden, wenn sie da sind, nicht eher.

            dedlfix.

            Hio

            Ah heisst das auf gut deutsch: Das ich erst wen als bsp. .ready() eintraff die buttons einbinden darf?

            Oder habe ich das jetzt total falsch verstanden :P ?

            Gruss Ivory

            1. Tach!

              Bitte zitiere nicht das komplette Posting.

              Ah heisst das auf gut deutsch: Das ich erst wen als bsp. .ready() eintraff die buttons einbinden darf?

              Wenn zum DOM-ready die Buttons schon da sind, dann ja. Wenn sie jedoch erst später erstellt werden, dann können sie auch erst danach beclickt werden.

              dedlfix.

              1. Hio dedlfix

                Wenn zum DOM-ready die Buttons schon da sind, dann ja. Wenn sie jedoch erst später erstellt werden, dann können sie auch erst danach beclickt werden.

                Vielen Dank!!! Dank deinem Anreiz konnte ich das Problem beheben:

                  
                $AuktionenAnzeige.html(AuktionsAusgaben);  
                  
                             if ($('#Kaufen1').length ) {  
                                        console.log('Es gibt mindestens ein Element mit der Klasse "Kaufen1".');  
                             $('#Kaufen1').click(function(){  
                                   alert($(this).id);  
                                   alert("Ein Test"+$(this).val());  
                                   socket.emit('AHKauf', $(this).val(), function(){  
                                   $('#nickWrap').hide();  
                                   $('#contentWrap').show();  
                                   });  
                               });  
                                        }  
                
                

                Vielen Dank noch einmal!

                Gruss Ivory

                1. Hi Ivory,

                  if ($('#Kaufen1').length ) {
                                          console.log('Es gibt mindestens ein Element mit der Klasse "Kaufen1".');

                  bedenke:
                  id's (sind die #) sollte es nur ein eiziges html-element geben- sonst könnte der Browser Probleme kriechen ;-)
                  class ist mit . Punkt davor !

                  Viele Grüße aus LA

                  --
                  ralphi
                  1. Hi Ivory,

                    if ($('#Kaufen1').length ) {
                                            console.log('Es gibt mindestens ein Element mit der Klasse "Kaufen1".');

                    bedenke:
                    id's (sind die #) sollte es nur ein eiziges html-element geben- sonst könnte der Browser Probleme kriechen ;-)
                    class ist mit . Punkt davor !

                    Viele Grüße aus LA

                    Ich habe dies nur falsch in den log hinterlegt, da dies ein bsp von Length war. Copy and Paste ;) Danke trozdem.

                    Lg Ivory