JavaScript Click Event auf dynamischen Inhalt

[sprefer]

Hallo zusammen,

ich habe mal eine Frage. Und zwar habe ich eine Benutzerliste auf meiner Seite. Die Benutzer werden per Ajax dynamisch aus einer PHP-Seite geladen, die die Datenbank abfragt.

Auf den Benutzernamen soll nun ein Menü erscheinen, wenn ich einen bestimmten Benutzer anklicke soll wie gesagt auf diesem Benutzer ein Menü eingeblendet werden.

Das Problem wo ich gerade stehe: Die Cklick-Funktion von JS funktioniert nicht bei der dynamisch erzeugten Liste.

Kann mir jemand bitte einen Lösungsansatz geben? Wäre um jede Hilfe dankbar.

Habe es auch schon mit Json und Json_encode probiert, aber da ist mir der Code einfach zu schwer.

Danke im Voraus

 

[CapFuture]

Moin moin,

falls du es nicht schon getan hast, musst du jegliche Events nach dem Laden per Ajax registrieren. Ansonsten wirst du nichts von den Events haben.
Auch würde ich per WebInspector im Chrome Browser oder einfachen Alert-Meldungen schauen, ob das Event überhaupt ausgelöst wird.

 

[sprefer]

Puh weiß gerade nicht so ganz was du meinst.
Ich poste einfach mal den Code:

Die PHP-Seite mit Abfrage der Datenbank:

$result = mysql_query("SELECT * FROM `users_online`");


while (list($id, $user_id, $user_type, $user_name) =
	mysql_fetch_row($result))
echo '<div class="user">' . $user_name . '</div>';

Hier der Aufruf:

var refreshId = setInterval(function()
{
     $('#userlist').load('userlist.php');
}, 10000);

und direkt danach zum testen:

$('.user').live('click', function() { alert('Klappts?'); });

Danach kommt mein DIV mit ID userlist

Leider wird hier kein alert ausgegeben

 

[xSeppelx]

Kann man den Container mit einem Click versehen?
Ggf. ist das ja das Problem?

 

[Lawnmower]

1. was ist das für ein Framework das Du da einsetzt? jQuery? Welche Version?
2. Der Click Aufruf, ist der Code ebenfalls im userlist.php oder in dem File das die userlist.php aufruft?

 

[RioCoding]

jQuery ist aber schon eingebunden?

Desweiteren ist .live() deprecated. Du solltest .on() verwenden. Click-Events auf DIV-Elemente sind erlaubt.

Was sagt denn die Konsole! Irgendwelche Fehler?

 

[sprefer]

Hatte es auch mit einem <a href="#" class="user"> probiert. Denke mal das Div ansich kann auch nicht angesprochen werden. Aber was dann?

Ich nutze die aktuelle JQuery-Version 10.2

Ergänzung (15. November 2013)

Nein keine Fehler, sobald ich was anklicke passiert nix, auch keine Meldung in der Konsole. Ja Jquery ist eingebunden, sonst würde ja auch nicht die Ajax-Abfrag funktionieren.

 

[RioCoding]

Probier mal

 $(document).on('click', '.user', function() {console.log('klick')});

 

[sprefer]

Ah dann habe ich in der Konsole ein "klick"

 

[RioCoding]

Dann scheint das wohl zu funktionieren

 

[Lawnmower]

ja dann wie oben schon gepostet, live() ist veraltet, das ganze heisst neu on(). Sicher mal eine mögliche Fehlerquelle.

Ansonsten probiers doch mal nach folgendem Schema:

$.ajax(
{
   url: 'userlist.php',
   async: true,
   context: document.body,
   success: function(data)
   {
     $('#userlist').html(data);
     $('.user').on('click', '.user', function() {console.log('klick')});
   }
});

Edit: Zu langsam

 

[RioCoding]

.live wurde in jQuery 1.9 entfernt, das wird also in keiner Konstellation funktionieren. Komisch allerdings, dass kein Fehler kommt, wenn versucht wird die Funktion zu verwenden.

 

[Lawnmower]

ja hatte das nur aus seinem Code übernommen, habs schon korrigiert.

 

[sprefer]

$.ajax(
    {
    url: 'userlist.php',
    async: true,
    context: document.body,
    success: function(data)
    {
    $('#userlist').html(data);
    $('.user').on('click', '.user', function() {console.log('klick')});
    }
    });

da erhalte ich kein klick in der Konsole.
Sollte es nicht besser so?

    $.ajax(
    {
    url: 'userlist.php',
    async: true,
    context: document.body,
    success: function(data)
    {
    $('#userlist').html(data);
    $(document).on('click', '.user', function() {console.log('klick');});
    }
    });

 

[Lawnmower]

kann gut sein, habs nicht getestet. Klappts denn mit der Anpassung?

Update
Die Zeile war da noch ein '.user' zuviel, wenn schon wäre es eher so:

$('.user').on('click', function() {console.log('klick')});

Aber deine Version dürfte auch klappen.

 

[RioCoding]

Ansonsten einfach mal einen Blick in die API werfen http://api.jquery.com/on/

 

[sprefer]

Das sieht schon mal gut aus. Danke soweit!!!

Nun habe ich aber noch eine Frage dazu, es soll ja kein alert ausgelöst werden, sondern ein Menü in einem DIV. Wie müsste die Function dann lauten?
Kann ich auch mehrere Aufrufe da rein packen? Also nicht nur class user sondern auch eine class admin oder so. Mit einem anderen Menü zum Aufrufen.

Ergänzung (15. November 2013)

Ach da fällt mir gerade etwas Dummes noch auf... Da das Menü ja auch bestimmte Link-Verweise hat bräuchte ich in der Function ja auch die ID des Benutzers, oder dessen Name oder so. Puh.

 

[Lawnmower]

Nun habe ich aber noch eine Frage dazu, es soll ja kein alert ausgelöst werden, sondern ein Menü in einem DIV. Wie müsste die Function dann lauten?

ohne deinen Code genauer zu kennen kann man das nicht beantworten aber ja Du kannst da einfach weiteren Code hinzufügen:

$(document).on('click', '.user', function() 
{
  console.log('klick');
  //Weiterer Code
});

Ach da fällt mir gerade etwas Dummes noch auf... Da das Menü ja auch bestimmte Link-Verweise hat bräuchte ich in der Function ja auch die ID des Benutzers, oder dessen Name oder so. Puh.

Kannst ja (nicht ganz hübsch aber dürfte funktionieren) zu jeder Zeile ein Hidden Form-Element mit der ID des Users reinpacken und dieses kannst ja dann per jQuery problemlos ansprechen.

 

[CapFuture]

Statt ein hidden Form-Element kannst du auch deinen Ajax geladenen Divs auch ein eigenes data-xxx Attribut mitgeben, bspw data-userid="1235".
Diese kannst du in HTML5 Manier über JQuery auslesen und an die passenden stellen weiterverwenden.

 

[Daaron]

Was du WIRKLICH suchst findest du unter dem Stichwort "Event Delegation".
Du verpasst nicht jedem deiner (dynamisch nachgeladenen) Listeneinträgen ein Click-Event, denn das ist entweder unmöglich oder aber unglaublich aufwändig, du gibst einem Elternelement den Auftrag, Click-Events seiner Kinder jederzeit zu überwachen.