Jquery rebind funktioniert nicht
Eingetragen von haggis (35)am 17.11.2009 - 03:04 Uhr in
Hi,
ich habe ein Problem mit dem rebinden von Events an neue Elemente. Zum Ankucken hier erstmal die Links:
Betroffene Seite: http://mindf.org/content/pennergame-highscore-tool-berlin
Javascript: http://mindf.org/sites/all/modules/dosser_highscore/js/dosser_highscore.js
Sobald die Seite geladen ist, werden alle Tabellenzeilen mit dem jquery-plugin "qtip" verbunden (Zeile 15). Das geht auch alles soweit astrein, nur sobald ich eine Suchanfrage abschicke (#ahah), dann haben nur noch diejenigen Zeilen einen Tooltip, die schon vorher angezeigt wurden. Die neuen lassen sich einfach nicht dazu überreden den Tooltip anzunehmen. Obwohl nach Erhalt des Such-Ajax-Response Drupal.behaviors wieder feuert und entsprechend Zeile 15 wieder aufgerufen wird und dann eigtl. alle Zeilen neu verbunden werden müssten.
Habe in Zeile 15 auch schon mit setTimeout() probiert, hat aber leider auch nichts gebracht. Probieren wollte ich auch mal .live() von JQuery, wusste dann aber nicht wie ich das da reinpfriemeln soll.
Sieht irgendwer wo es hakt?
Wäre für jede Hilfe dankbar!
Greetz haggis
- Anmelden oder Registrieren um Kommentare zu schreiben
Ok, das habe ich gelöst,
Eingetragen von haggis (35)am 17.11.2009 - 18:59 Uhr
Ok, das habe ich gelöst, indem ich vor dem Anlegen eines Tooltips prüfe, ob es bereits einen für die Reihe gibt.
Das letzte Problem, das sehr sehr nervig ist, ist, dass das Mouseover-Event über die Zeile erst dann ausgelöst wird, wenn ich mit der Maus innerhalb der Zeile von einem zum andern td rüberfahre. Sehr seltsam.
Gibts dafür bekannte Vorgehensweisen?
- Anmelden oder Registrieren um Kommentare zu schreiben
hast du dich schon mal mit
am 17.11.2009 - 07:54 Uhr
hast du dich schon mal mit Event delegation befasst? Das wäre wohl in so einem Fall anzuwenden. Findest im Netz viele Beiträge dazu (hier nur ein Beispiel: http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery).
Neuere JQuery Versionen unterstützen das sogar native
______________________________
Yet Another Drupal Site (YADS)
http://www.rapsli.ch
******************************
Jetzt schon! Danke für das
am 17.11.2009 - 15:18 Uhr
Jetzt schon! Danke für das Stichwort, rapsli :)
Mit dem Hintergrundwissen habe ich es nun auch geschafft, das ganze mit live() zu machen (denn das ist genau die native Unterstützung). Das ursprüngliche Problem hat sich damit auch erledigt, die neuen Zeilen reagieren wieder auf das Event. Nur ist das jetzt nicht mehr so "smooth" wie vorher. Da musste man einfach nur kurz über die Zeile und schwupps wars da. Jetzt muss man einige Pixel der Zeile entlang fahren damit überhaupt was kommt. Und die Performance hat subjektiv empfunden auch etwas nachgelassen.
Für die, die nicht extra im Quelltext suchen wollen hier mal die relevanten Abschnitte:
Drupal.behaviors.dosser_highscore = function(context) {
history_enabled = Drupal.settings.dosser_highscore.history_enabled;
plotted = new Array();
if (history_enabled == 1) {
initializeTooltips();
}
}
function initializeTooltips() {
// Tooltip
$("tr").live("mouseover", function() {
$(this).qtip({
position: {adjust: {screen: true, scroll: true}, corner: {tooltip: 'topLeft', target: 'bottomLeft'}},
content: {
title: $(this).find('td:first').html(),
text: '<div id="'+$(this).attr("id")+'_history" style="width:300px;height:150px">loading...</div>'
},
style: {
width: { max: 500},
border: {width: 1, radius: 0, color: '#99B8CC'},
title: { 'color': 'black', 'background-color': '#808080'},
},
show: {
when: {event: 'mouseover'},
delay: 700,
effect: {length: 0}
},
hide: {
when: {event: 'mouseout'},
delay: 700,
effect: {length: 0}
}
});
});
// hoverIntent - Verzögerung
$("tr").live("mouseover", function() {
$(this).hoverIntent({
sensitivity: 1,
interval: 720,
over: function(){
var id = ($(this).attr("id")).split("row");
dosser_showPlot(id[1])
},
timeout: 700,
out: function(){}
});
});
}
// Wahrscheinlich irrelevant: Graph zeichnen
function dosser_showPlot(id) {
if(plotted[id] != 1) {
$.getJSON(base_url + "dosser/history/" + version + "/" + id,
function (series) {
var trim = 0;
var data = "[{ 'label': 'Punkte', 'data': [";
for(var i = 0; i < series.dates.length; i++) {
data += "["+(series.dates[i]*1000)+", "+series.points[series.dates[i]]+"], ";
trim = 1;
}
if (trim == 1) {
data = data.substring(0, data.length -2) + "], color: '#99B8CC'}]";
} else {
data += "], color: '#99B8CC'}]";
}
data = eval("("+data+")");
var plot = $.plot($("#row"+id+"_history"), data, {
xaxis: { mode: "time", timeformat: "%d.%m", ticks: 5},
lines: { show: true, fill: true, fillColor: '#cedee9'},
points: { show: true },
legend: { position: 'nw'},
yaxis: { tickDecimals: 0 }
});
plotted[id] = 1; // Gibts hier eine Möglichkeit plotted erst dann auf 1 zu setzen, wenn Graph angezeigt wird?
// Es passiert gelegentlich, dass der Graph erst nach Neuladen der Seite wieder aufgebaut werden kann,
// wenn man während der Ladezeit die Maus von der Zeile genommen hat.
}
);
}
};
Gibts da Möglichkeiten, das "Mouseover" besser reagieren zu lassen, statt wie jetzt, erst mit der Maus quer die Zeile entlang fahren zu müssen?
Und: mit dem plotted-Array speichere ich, welche Graphen bereits gezeichnet wurden, um eine erneute Serveranfrage zu vermeiden. Gelegentlich passiert es aber, dass plotted[id] auf 1 gesetzt wird, ohne dass der Graph tatsächlich gezeichnet wurde. Dann hilft nur ein Neuladen der Seite :/
ist ein echt cooles
am 17.11.2009 - 15:29 Uhr
ist ein echt cooles Prinzip!
______________________________
Yet Another Drupal Site (YADS)
http://www.rapsli.ch
******************************
Ja, und vor allem
am 17.11.2009 - 16:23 Uhr
Ja, und vor allem überraschend, dass das auch mit allen gängigen Browsern funktioniert.
Mit Firebug konnte ich gerade beobachten, wieso die Performance nachlässt und warum die Plots manchmal nicht angezeigt werden: mit jedem Hover wird ein neuer Tooltip und damit ein neuer
angelegt. Kann mir nur nicht erklären wieso. Ojeoje :(