mit json reingeladene elemente lassen sich nicht manipulieren

[risdesign]

hallo,

ich habe ein #content div dass json daten reinlädt. leider lassen die sich dann aber nicht mehr mit jquery ansprechen. kann mir jemand bitte weiterhelfen?

Es geht zum beispiel um das einblenden eines div (optionen)

script_verwaltung.php

$context = "<div id='".$id."' class='gruppe'>Gruppe 1
<div class='optionen'>
<div class='sichtbar'></div>
<div class='unsichtbar'></div>
<div class='editieren'></div>
<div class='loeschen'></div>
</div>
</div>";
.
.
.
$ret = Array("context" => $context);
.
.
.
echo json_encode($ret);

verwaltung.php

<div id="content">
</div>

script.js

	$(".optionen").hover(
            function(){$(this).fadeIn("slow");},
            function(){$(this).fadeOut();    }
        );
.
.
.
	function gruppe_laden(){
		$.ajax({
                type: "POST",
                url: "scripts/script_verwaltung.php",
                data: "seite=gruppe_laden",
                success: function(data){
                    var json = $.parseJSON(data);
			$("#content").html(json.conte);
				}
            });

style.css

.
.
.
.optionen
{
	height: 20px;
	margin: -26px 41px;
	display: block;
	position: absolute;
	visibility: hidden;
}
.
.
.

 

[abuzze]

Wenn du events von Elementen überwachen willst, die erst später in das Document geladen werden, benutze $.on()

$(document).on('mouseenter mouseleave',  '.gruppe', function(e){
        if( e.type=='mouseenter' ){
           $('.optionen', this).fadeIn("slow");
        }
        else{
           $('.optionen', this).fadeOut();
        }
});

 

[Parantatatam]

Ähm, nein, da muss ich abuzze explizit wiedersprechen, da "on" (ehemals "bind") genau das Gegenteil tut: es bindet Ereignishandler an Elemente, die zu diesem Zeitpunkt vorhanden sind. Für alle anderen gibt es "delegate" (früher gab es mal "live", aber das ist jetzt veraltet).

 

[risdesign]

vielen dank für die antworten. ich habe in der doku gesehen dass

$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});

scheinbar dasselbe ist wie

$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});

werde aber beides testen sobald ich zuhause bin

 

[abuzze]

Ähm, nein, da muss ich abuzze explizit wiedersprechen, da "on" (ehemals "bind") genau das Gegenteil tut: es bindet Ereignishandler an Elemente, die zu diesem Zeitpunkt vorhanden sind. Für alle anderen gibt es "delegate" (früher gab es mal "live", aber das ist jetzt veraltet).

delegate ist ebenso veraltet:

As of jQuery 1.7, .delegate() has been superseded by the .on() method.

 

[Parantatatam]

Mh, da steht nur, dass es überholt wurde. Damit ist es zwar noch nicht veraltet, aber dennoch sollte man (für die Zukunft) "on" verwenden. Ich danke dir für diesen Hinweis.

 

[jeipack]

Hänge den Event erst an die Elemente nachdem diese im DOMBaum existieren:

    function gruppe_laden(){
        $.ajax({
                type: "POST",
                url: "scripts/script_verwaltung.php",
                data: "seite=gruppe_laden",
                success: function(data){
                    var json = $.parseJSON(data);
            $("#content").html(json.conte);

            $(".optionen").hover(
            function(){$(this).fadeIn("slow");},
            function(){$(this).fadeOut();    }
        );
                }
            });

Alternativ müsstest du den Eventhandler an das übergeordente Element hängen. In deinem Fall würde das etwa so aussehen:

$(#content).on('mouseenter', '.optionen',  function(){
         $(this).fadeIn("slow"); //nicht sicher ob $(this) "#content" oder "#content .optionen" anspricht
}).on('mouseleave', '.optionen', function() {
        $(this).fadeOut();
});

 

[risdesign]

Vielen lieben Dank für eure Hilfe. Hier nochmal den Code

                    var json = $.parseJSON(data);
					// PRÜFEN OB DER MITARBEITER SCHON DRAN IST
					$("#context").html(json.context);
					
					
					$(".optionen_mitarbeiter").hide();

					
					
						$(".mitarbeiter_rahmen").on('mouseenter mouseleave',  this, function(e){
        					if( e.type=='mouseenter' ){
           					$('.optionen_mitarbeiter', this).fadeIn('fast');
        					}
        					else{
           					$('.optionen_mitarbeiter', this).fadeOut('fast');
        					}
						});
		
					}