JavaScript Zugriff auf Liste welche von Rails mit JavaScript erzeugt wurde

[ismon]

Hallo zusammen,

ich bin gerade am experimentieren mit RoR und stehe vor folgendem Problem.

Ein Ruby Script erzeugt folgende JS Ausgabe (index.js.erb):

<%require 'sanitize'%>
$('#dashboard_entries_list').empty();
<% @unread_entries.each do |entry|%>
$('#dashboard_entries_list').append($('<li>').attr('class','entry_unselected').append('<h2><%= j link_to entry.title, show_feed_entry_path(entry.id), remote: true%></h2><p><%=j link_to Sanitize.clean(entry.content).at(0..70)+"...",show_feed_entry_path(entry.id), remote: true %></p>'));
<%end%>

Diese Ausgabe erzeugt beim Aufruf eine Liste (ul).
z.B.

<ul id="dashboard_entries_list">
<li class="entry_unselected">
<h2>
<a data-remote="true" href="/entries/159">Ohne Alles: Cooler Master bietet Quickfire XT an</a>
</h2>
<p>
<a data-remote="true" href="/entries/159">Die hierzulande bisher ausschließlich mit beleuchteten Schaltern erhält...</a>
</p>
</li>
<li class="entry_unselected">
<h2>
<a data-remote="true" href="/entries/160">Nofan arbeitet an günstigem Passiv-Kühler</a>
</h2>
<p>
<a data-remote="true" href="/entries/160">Durch besonders ausladende Konstruktionen und große Lamellenflächen erl...</a>
</p>
</li>
<ul>

Das funktioniert auch wunderbar.

Wenn ich jetzt allerdings über JavaScript auf die Elemente der Liste beim Klick reagieren möchte geht das leider nicht.
Mit folgendem JS versuche ich beim Klick die Daten des jeweiligen auszugeben:

 $( "#dashboard_entries_list li" ).click(function(event) {
  alert($(this).html());
});

Leider funktioniert das nicht. Beim Klick auf ein Element der erzeugten Liste passiert nichts.

Wenn den HTML Code der erzeugten Listen in JSFiddler kopiere und dann den JS Code dazufüge dann geht es ohne Problem.

Hat jemand eine Idee woran das liegen könnte?

gruß
Simon

 

[Daaron]

Mach doch mal ein console.log($( "#dashboard_entries_list li" ));
Ich vermute, du bindest deinen Clickhandler zu früh, zu einem Zeitpunkt, an dem "#dashboard_entries_list li" noch nicht im DOM existiert.

 

[ismon]

Hi,
danke für deine Antwort. Du hast vollkommen Recht.

Hab es jetzt so, mit der jquery Funktion on(), gelöst:

 $('#dashboard_entries_list').on('click','li',function(event) {
alert($(this).html());
});

Und schon funktioniert es.

Vielen Dank!

 

[Daaron]

Alternativ hättest du auch gucken können, ob dein Listen-Generator n "Ready"-Callback hat, an den du dich hängen kannst.

 

[ismon]

Ok, bin noch nicht so das JS Experte. Kannst du das etwas genaue erklären oder hat du dazu einen Link?

 

[Daaron]

Seh ich das richtig? Das im ersten Block ist ne Schleife in Ruby, die JS ausgibt? Dann brauchst du gar keinen Callback (gibt auch keinen), sondern du musst nur sicherstellen, dass du deinen Aufruf nach dieser Schleife durchführst... indem du ihn dahinter schreibst.

Das ist aber von, wie ich finde, eher zweifelhaftem Nutzen. Lass es einfach wie es aktuell ist. Delegated Events sind eigentlich ganz praktisch und hier ne echt gute Lösung.