2010-05-17 16 views
8

Also verwende ich jQuery's AJAX-Funktion, um etwas XML für mich zu lesen, und es hat gut funktioniert. Aber jetzt versuche ich, die Anzeigeeigenschaft von 4 verschiedenen dynamisch generierten Divs zu manipulieren, wenn mouseup von Optionselementen ausgelöst wird. Die Größe und x/y der divs werden durch die XML bestimmt und durch geparst.jQuery .append() funktioniert nicht in IE, Safari und Chrome

Mein Problem liegt in der Tatsache, dass diese Divs entweder nicht generiert werden oder nur nicht in IE, Safari und Chrome angezeigt werden. In Firefox und Opera funktionieren sie. Ich verwende jAQuerys .append(), um die divs und dann die .css() -Funktion zu erstellen, um sie zu bearbeiten. In den Entwicklerwerkzeugen von Chrome sehe ich, dass die CSS-Eigenschaft, die im Skript geändert wird, von der Eigenschaft im Stylesheet überschrieben wird. Irgendwelche Korrekturen?

Divs hier erstellt:

case "dynamic": 
    var n = name; 
    switch(portion){ 
     case "stub": 
     $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>"); 
     break; 
     case "body": 
     $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>"); 
     break; 
    } 
    break; 
    case "static": 
    var n = name; 
    switch(portion){ 
     case "stub": 
     $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>"); 
     break; 
     case "body": 
     $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>"); 
     break; 
    } 
    break; 

mouseup Funktionen, die die Anzeigeeigenschaften ändern:

$('#StubTemplates').find('.ddindent').mouseup(function(){ 
    var tVal = $(this).val(); 
    var tTitle = $(this).attr('title'); 
    if(!stubActive){ 
    $('.stubEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    stubActive = true; 
    }else{ 
    $('.stubEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    stubActive = false; 
    } 
    }); 
    $('#StubTemplates').find('#stubTempNone').mouseup(function(){ 
    $('.stubEditable').css('display', 'none'); 
    }); 
    $('#BodyTemplates').find('.ddindent').mouseup(function(){ 
    var tVal = $(this).val(); 
    var tTitle = $(this).attr('title'); 
    if(!bodyActive){ 
    $('.bodyEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    bodyActive = true; 
    }else{ 
    $('.bodyEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    bodyActive = false; 
    } 
    }); 
    $('#BodyTemplates').find('#bodyTempNone').mouseup(function(){ 
    $('.bodyEditable').css('display', 'none'); 
    }); 
+1

Wie auch immer, dass Sie diesen Code-Snippet auf ein bloßes Beispiel von dem, was das Problem verursacht, abschneiden können? Oder zumindest einige Informationen über die genauen IDs/Klassen, die das Problem verursachen? Jede Formatierung, die Sie vornehmen können, um dieses Snippet zu bereinigen, wäre ebenfalls nützlich. Prost. – malonso

+0

Okay, ich habe es so weit wie möglich getrimmt. –

+0

'$ ('#' + tVal)' ugh. Hat jemand schon einmal von 'document.getElementById (tval)' gehört? Der jQuery-Hash-anhängende ID-Getter ist im Web so verbreitet ... aber er ist so langsam und kludgy. –

Antwort

4

Da Sie in dev Tools sehen können, dass der Stil korrekt zu dem Element hinzugefügt wird, ist die Frage nicht so sehr über JQuery als über die Kaskade von CSS. Normalerweise sollte alles, was direkt zum Element hinzugefügt wird, Vorrang haben, aber es gibt Ausnahmen. CSS specificity kann zu einem verwirrenden Verhalten führen. Hast du ein wichtiges irgendwo im Weg?

Auch, da Sie verstecken und Anzeigen mit display: block und display: none, stellen Sie sicher, Sie haben keine Sichtbarkeit: in CSS versteckt, die überschreiben wird.

Auch, warum Sie nicht nur .show() und .hide() oder .toggle() verwenden? Sie können auch versuchen, Klassen zu entfernen, die sich im Weg befinden, und andere mit .removeClass(), .addClass() oder .toggleClass() zu setzen.

Wenn alles andere fehlschlägt, können Sie immer versuchen $ ('. BodyEditable'). Css ('display', 'none! Wichtig') ;.

Ich versuche zu vermeiden, wichtig, da es so viele Kopfschmerzen verursacht ... aber es ist aus einem Grund in der Spezifikation.

+0

Nicht einer! Wichtig. Sowohl .stubEditable als auch .bodyEditable sind so eingestellt, dass sie angezeigt werden: none. –

+0

Ich habe einen Link in meiner Antwort zu einem Artikel über CSS-Spezifität hinzugefügt, der nützlich sein könnte. Ich bin ziemlich oft mit solchen Dingen konfrontiert worden. Ich bin auf keinen Fall ein CSS-Guru ... Ich verlasse mich normalerweise auf unseren redsident CSS-Typen in unserem Team und es kommt fast immer auf einen funky Kaskade/Spezifikationskonflikt an. Die Tatsache, dass Sie sehen können, dass der Stil den Elementen hinzugefügt wird, schließt JQuery aus ... es sei denn, JQuery hat das Attribut style irgendwie fehlerhaft gemacht. –

+0

Bradley, ich bin nicht mehr als eine Woche neu bei jQuery, also versuche ich an dieser Stelle so viel wie möglich zu absorbieren. Ich werde in Zukunft definitiv show() und hide() verwenden. Außerdem habe ich removeClass() und addClass() vergeblich versucht. Beide werden nach Möglichkeit auch verwendet. Der Versuch, zu verwenden, wichtig, um die Stile zu überschreiben, hat leider nichts getan. –

1

So habe ich es geschafft, das Problem zu beheben. Die Optionen im Auswahlmenü haben den Mouse-Up nicht aufgerufen. Daher habe ich im Select-Menü eine .change() -Funktion verwendet, während ich mit einem: selected-Selektor nach dem ausgewählten Element gesucht habe.

Vielen Dank an Bradley, dass er mich auf die richtige Spur gebracht hat.

+0

Ich bin froh, dass ich helfen konnte, Matt! –

0

einfache lösung für dieses problem für mich: zu dem div hinzufügen sie anfügen css display:block;. wahrscheinlich könnte jede andere Art von display: helfen.

Verwandte Themen