JavaScript Prototype - Suche Funktion ähnlich jQuery.live()

[Matthias]

Hallo,

ich versuche mich gerade ein wenig mit Prototype. Mein Problem ist jetzt folgendes: Ich führe einen AJAX-Aufruf durch, der Daten vom "Server" holt und anschließend gebe ich diese Daten in einer Tabelle aus. In jeder Zeile dieser Tabelle ist eine Grafik und wenn man auf diese Grafik klickt soll eine Funktion aufgerufen werden. Meine Frage ist wie man das mit Prototype realisiert? In jQuery gibt es ja die Möglichkeit über $('img').live('click', 'funktion') die gewünschte Funktion an alle IMG-Elemente zu binden. Aber mit Prototype bekomme ich das irgendwie nicht hin.

Gruß Matthias

 

[paddya]

jQuery.live() ist nichts weiter als automatische Event Delegation. Prototype dürfte der Callback-Funktion auch das originale (bzw. gefixte) Event-Objekt übergeben. Du musst dann einfach überprüfen, ob das geklickte Element auf deine Bedingung für einen Button zutrifft. Ich würde dem Button einfach eine Klasse button oder so ähnlich geben und dann prüfen, ob das Element die Klasse hat. Das Click-Event legst du auf die ganze Tabelle bzw. den tbody, falls im thead oder tfoot keine Buttons vorkommen.

$$('#table').observe('click', function(e){
    var target = e.target;
    // prüfen, ob Button geklickt wurde. Idealerweise hat der Button einfach eine passende CSS-Klasse
    if(target.getAttribute('class').indexOf('button') != -1)
        action();
})

Ist jetzt eher Pseudo-Code, aber in die Richtung sollte es gehen.

Greetz

paddya

 

[ice-breaker]

mal als Idee, weiß nun aber nicht ob es funktioniert:

Element.addMethods({
	live : function(selector, eventname, handler) {
		document.observe(eventname, function(event) {
			if($(event.element).match(selector)) {
				handler();
			}
			else if($(event.element).up(selector)){
				handler();
			}
		});
	}
});

benutzt dann so:

document.live('li#fruits', 'click' function() {
  console.log('test');
});

Hat noch nen paar Designschwächen:

1. woanders hinzugefügt als zu document ist sinnlos
2. der Handler bekommt kein event-obejct
3. ...