[Erledigt] jQuery Funktion auf dynamisch hinzugefügtes Div legen

sdcleitung · 14.11.2010, 19:45

Hey,
ich führe einen Hover Effekt mit jQuery durch:

Code:

	$('.klasse').hover(function () { $(this).css('background-image', 'url(close_hover.png)'); }, function () { $(this).css('background-image', 'url(close.png)'); });

Allerdings funktioniert dies nicht bei allen Divs.
Denn wenn ich ein Div dynamisch mit jQuery hinzufüge ebenfalls mit class="klasse"; geht es nicht. Das ist mit auch klar.

Weiß einer von euch evtl trotzdem wie ich das Problem lösen könnte?

Vielen Dank schonmal

ChrisB · 14.11.2010, 20:01

Wenn du neue Elemente nachträglich hinzufügst, musst du natürlich dafür sorgen, dass diese ebenfalls den Eventhandler verpasst kriegen.

Entweder machst du das manuell, oder du nutzt jQuery's live-Funktionalität (die geht allerdings zu Lasten der Performance).

haemoglobin · 14.11.2010, 20:15

Zitat:

Zitat von ChrisB

Entweder machst du das manuell, oder du nutzt jQuery's live-Funktionalität (die geht allerdings zu Lasten der Performance).

Hast Du dafür einen Link parat? Bisher habe ich immer gelesen das Live und ganz besonders Delegate eine bessere Performance bieten.

sdcleitung · 14.11.2010, 22:01

Hey,
danke für die Antwort ...
Was meinst du mit manuell ? Via onmouseover bzw. out oder wie?

Also zur live Funktionalität habe ich unter anderem diesen Link hier gefunden - denke der erklärt das ganz gut:
http://benjaminpaap.de/2010/09/jquery-live/

Und wenn nicht einfach bei Google nach jquery .live suchen

---------------------------------------------------------------

Allerdings verstehe trotzdem nicht wie ich es einbringen soll ...

haemoglobin · 15.11.2010, 09:06

Ich weiß wie live und delegate funktionieren. Mir ging es um die Performance.

Zu deinem Problem (bei google auch zu finden per jQuery+live+hover):

PHP-Code:

  $('deinSelector').live('mouseover mouseout', function(e) {
  if (e.type == 'mouseover') {
    // hover
  } else {
    // normal
  }
});


// Oder die delegate Lösung, welche vorzuziehen wäre falls es bei dir möglich ist, was ich mal annehme:

$('derSelector von z.B. deinem Div in dem deine neuen Elemente erzeugt werden').delegate('deinSelectorImNeuenElement', 'mouseover mouseout', function(e) {
  if (e.type == 'mouseover') {
    // hover
  } else {
    // normal
  }
});

Hast Du keine Möglichkeit dies per CSS zu machen? Würde ich persönlich einer Javascript-Lösung immer vorziehen.

sdcleitung · 15.11.2010, 15:49

Hey,
leider kann ich es via css nicht machen, da es sich um ein i Element handelt und der IE aktzeptiert hover nur für a Elemente.

Danke für den Code hat wunderbar geklappt

Nur eine Frage worin besteht jetzt genau der Unterschied, also wegen der Performance?

Wäre nett wenn mir das einer eklären könnte oder einen Link hat habe leider nichts gefunden über Google.

Vielen Dank

haemoglobin · 15.11.2010, 16:31

Falls Du Live und Delegate meinst schau dir mal folgenden Code an:

PHP-Code:

  <body>

  ... hier viel verschachtelter html code...

    <div id="delegateExample">

        ... hier werden dynamisch Elemente hinzugefügt ...

    </div>

  ...

</body>

Wenn man nun die Live funktion nutzt "bubbled" ein Event durch den ganzen Code nach oben. Wenn Du allerding Delegate nutzt, dann kannst Du folgendes machen:

PHP-Code:

  $('#delegateExample').delegate('button' 'click', function(e) {

  // dein Code hier.

  e.preventDefault();

})

Dadurch können die Events schneller von dem Eventhandler eingefangen werden, was gut für die Performance ist.

sdcleitung · 15.11.2010, 17:45

Hey,
ok vielen vielen Dank für den Code und die Erklärungen

Und schon wieder was neues gelernt ^^

rudygotya · 15.11.2010, 18:15

Nur als Ergänzung: wenn du zu dem mouseover/ mouseout noch einen focus/blur event drauf legst, gibst du auch Tastatur/Touchpad-Benutzern eine Chance.
Javascript-Verhalten/Interaktion sollte unabhängig vom Eingabegerät sein.

sdcleitung · 15.11.2010, 18:23

Hey,
wie soll das beim Touchpad denn gehen, also ich hab Touchscreenmonitor hier aber wenn du draufdrückst ist geklickt da geht doch kein hover effekt?

ok wenn du mit der tastatur jedes element durch gehst ja

und bei meinem touchscreenmonitor kann ich drüber fahren und es geht auch ...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Funktionsberechtigungne, Rollen und Vererbung von Rechten	Geryon	Software-Design	37	02.11.2010 23:08
JQuery IE 6 Probleme mit Funktion	Thorus	JavaScript, Ajax und mehr	22	29.09.2010 12:17
[Erledigt] global Framework Variable nach Jquery $.post() Funktion	ozapft-is	JavaScript, Ajax und mehr	15	22.08.2010 17:24
[Erledigt] Ajax, jQuery - CKEDITOR Fehler bei Instanzierung	jGeee	JavaScript, Ajax und mehr	3	26.03.2010 09:09
jQuery Funktion nur 1x aufrufen	stayInside	JavaScript, Ajax und mehr	3	23.07.2009 17:25
[Erledigt] funktion aufrufen wenn andere funktion aufgerufen wird	kalli.c0re	PHP Tipps 2009	16	05.06.2009 13:49
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
PHP-GTK Tutorial		Beitragsarchiv	9	02.11.2005 21:07
Rückgabewert einer rekrusiven Funktion		PHP-Fortgeschrittene	7	06.10.2005 18:44
(schnellere) Funktion zum Zusammenfassen von CSS		PHP-Fortgeschrittene	21	08.08.2005 16:47
Funktion in einer Funktion aufrufen?		PHP Tipps 2005-2	11	14.06.2005 15:14
[Erledigt] Wie kann ich beliebig viele Werte an eine Funktion übergeben		PHP Tipps 2005	11	25.01.2005 10:44

14.11.2010, 19:45
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	[Erledigt] jQuery Funktion auf dynamisch hinzugefügtes Div legen Hey, ich führe einen Hover Effekt mit jQuery durch: Code: $('.klasse').hover(function () { $(this).css('background-image', 'url(close_hover.png)'); }, function () { $(this).css('background-image', 'url(close.png)'); }); Allerdings funktioniert dies nicht bei allen Divs. Denn wenn ich ein Div dynamisch mit jQuery hinzufüge ebenfalls mit class="klasse"; geht es nicht. Das ist mit auch klar. Weiß einer von euch evtl trotzdem wie ich das Problem lösen könnte? Vielen Dank schonmal


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.11.2010, 20:01
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Wenn du neue Elemente nachträglich hinzufügst, musst du natürlich dafür sorgen, dass diese ebenfalls den Eventhandler verpasst kriegen. Entweder machst du das manuell, oder du nutzt jQuery's live-Funktionalität (die geht allerdings zu Lasten der Performance). __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

14.11.2010, 22:01
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, danke für die Antwort ... Was meinst du mit manuell ? Via onmouseover bzw. out oder wie? Also zur live Funktionalität habe ich unter anderem diesen Link hier gefunden - denke der erklärt das ganz gut: http://benjaminpaap.de/2010/09/jquery-live/ Und wenn nicht einfach bei Google nach jquery .live suchen --------------------------------------------------------------- Allerdings verstehe trotzdem nicht wie ich es einbringen soll ... Geändert von sdcleitung (14.11.2010 um 22:07 Uhr).

15.11.2010, 09:06
haemoglobin Benutzer Registriert seit: 04.07.2009 Beiträge: 67 PHP-Kenntnisse: Anfänger	Ich weiß wie live und delegate funktionieren. Mir ging es um die Performance. Zu deinem Problem (bei google auch zu finden per jQuery+live+hover): PHP-Code: $('deinSelector').live('mouseover mouseout', function(e) { if (e.type == 'mouseover') { // hover } else { // normal } }); // Oder die delegate Lösung, welche vorzuziehen wäre falls es bei dir möglich ist, was ich mal annehme: $('derSelector von z.B. deinem Div in dem deine neuen Elemente erzeugt werden').delegate('deinSelectorImNeuenElement', 'mouseover mouseout', function(e) { if (e.type == 'mouseover') { // hover } else { // normal } }); Hast Du keine Möglichkeit dies per CSS zu machen? Würde ich persönlich einer Javascript-Lösung immer vorziehen. Geändert von haemoglobin (15.11.2010 um 09:44 Uhr).

15.11.2010, 15:49
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, leider kann ich es via css nicht machen, da es sich um ein i Element handelt und der IE aktzeptiert hover nur für a Elemente. Danke für den Code hat wunderbar geklappt Nur eine Frage worin besteht jetzt genau der Unterschied, also wegen der Performance? Wäre nett wenn mir das einer eklären könnte oder einen Link hat habe leider nichts gefunden über Google. Vielen Dank

15.11.2010, 16:31
haemoglobin Benutzer Registriert seit: 04.07.2009 Beiträge: 67 PHP-Kenntnisse: Anfänger	Falls Du Live und Delegate meinst schau dir mal folgenden Code an: PHP-Code: `<body> ... hier viel verschachtelter html code... <div id="delegateExample"> ... hier werden dynamisch Elemente hinzugefügt ... </div> ... </body>` Wenn man nun die Live funktion nutzt "bubbled" ein Event durch den ganzen Code nach oben. Wenn Du allerding Delegate nutzt, dann kannst Du folgendes machen: PHP-Code: `$('#delegateExample').delegate('button' 'click', function(e) { // dein Code hier. e.preventDefault(); })` Dadurch können die Events schneller von dem Eventhandler eingefangen werden, was gut für die Performance ist.

15.11.2010, 17:45
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, ok vielen vielen Dank für den Code und die Erklärungen Und schon wieder was neues gelernt ^^

15.11.2010, 18:15
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Nur als Ergänzung: wenn du zu dem mouseover/ mouseout noch einen focus/blur event drauf legst, gibst du auch Tastatur/Touchpad-Benutzern eine Chance. Javascript-Verhalten/Interaktion sollte unabhängig vom Eingabegerät sein. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

15.11.2010, 18:23
sdcleitung Erfahrener Benutzer Registriert seit: 10.04.2010 Beiträge: 115 PHP-Kenntnisse: Anfänger	Hey, wie soll das beim Touchpad denn gehen, also ich hab Touchscreenmonitor hier aber wenn du draufdrückst ist geklickt da geht doch kein hover effekt? ok wenn du mit der tastatur jedes element durch gehst ja und bei meinem touchscreenmonitor kann ich drüber fahren und es geht auch ... Geändert von sdcleitung (15.11.2010 um 18:40 Uhr).