Hallo,
ich nutze JQuery 1.7 und das ganze taucht folgendermaßen auf:
Ich habe eine index.php, die ein Menü besitzt. Klickt man auf einen Menüpunkt wird die entsprechende HTML/PHP-Seite per $.ajax in ein bestimmtes Div geladen.
Die per Ajax geladene Datei ist eine "normale" HTML-Datei, die PHP-Elemente besitzt und eben auch über das normale Grundgerüst verfügt <html><body><head>. Im <head> der zu inkludierenden Datei wird dann die jeweilig für den Menüpunkt wichtige JS-Datei inkludiert - sie wird in der index.php nicht inkludiert.
Dieser .js-Datei habe ich das obige Beispiel entnommen. Wenn ich nun die Seite initial aufrufe und das erste Mal auf den Menüpunkt klicke, wird die Seite in das Div geladen und "init" wird zwei mal geworfen. Mache ich z.B. einen reload der gesamten Page oder klicke auf einen anderen Menüpunkt und wieder zurück, wird es nur einmal geworfen.
Das ganze macht bei mir Probleme, da ich eine Funktion (siehe unten) habe bei der ich einen Suchbegriff eingeben kann und nach Klick auf das Suchergebnis (li.search_list_item) soll der geklickte Inhalt in ein anderes Div übertragen werden (#searchresult). Das Problem ist nun, dass bei dem ersten Aufruf des Menüpunkt und der Nutzung der Suche, das geklickte Element zwei Mal hinzugefügt wird! Komischerweise taucht dieses Phänomen im Firefox auf, im Safari aber nicht - obwohl das 'init' auch im Safari zwei Mal ausgegeben wird.
Code:
$(document).ready(function(){
$('#searchresult').on('click', 'li.search_list_item', function(){
$('#msg_receiver').append('<li class="single_receiver" id="single_receiver_'+$(this).attr('id')+'">'+$(this).find('span').html()+'</li>');
$('#single_receiver_'+$(this).attr('id')).hide().fadeIn(500);
});
});
Ich habe es auch schon mit event.stopPropagation(); versucht, was aber nichts geholfen hat - obwohl ich function() um function(event) erweitert habe.
Wäre für Ratschläge seeeeeeeeeeeehr dankbar!