Style CSS nie odświeżają się po uruchomieniu AJAX

Używam poniższego kodu AJAX do dołączania treści z innego pliku HTML na moją stronę indeksu. AJAX działa poprawnie, a zawartość wyświetla się, ale style, które zakodowałem w CSS, nie są stosowane po uruchomieniu AJAX.Style CSS nie odświeżają się po uruchomieniu AJAX

Szukałem w sieci, szukając odpowiedzi na problem, ale do tej pory rozwiązania, które próbowałem, nie zadziałały. Poniżej używam .trigger ("create"), aby spróbować wymusić odświeżenie CSS na treści, które dołączam, ale to nie działa. Jeśli ręcznie odświeżę stronę w przeglądarce, zastosowane zostaną moje style. Czy ktoś może wskazać mi właściwy kierunek odświeżania stylów po uruchomieniu AJAX bez odświeżania całej strony?

$.ajax({ type: "GET", 
    url: pageToLoad, 
    async: false, 
    success : function(data) 
    { 
     $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create'); 
    } 
});

HTML, który jest dołączany do strony indeksu: style

<div class="content" id="portfolio"> 
    <div class="wrapper"> 
     <h2>Portfolio</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum libero non egestas dapibus. Nam gravida, libero ac posuere eleifend, mauris nisi venenatis metus, non hendrerit magna justo eget lectus.</p> 
    </div><!--wrapper--> 
    <div class="clear"></div> 
</div><!--content-->

CSS stosowane w default.css:

#index {background-color:#82e4e5;} 
#portfolio {background-color:#fb5656;}

Źródło

2013-09-06 Leann

Witaj Leann, przeglądarki * powinny * stosować style do HTML dodanego przez AJAX. Jeśli tak nie jest, sprawdź, czy nie ma literówki w wyborze CSS. Nie wygląda na to, co widzę, ale nie wiem, czy jest coś więcej. Kolejnym krokiem do rozwiązywania problemów może być umieszczenie kodu HTML bezpośrednio w pliku, aby sprawdzić, czy będzie on stylizowany, usuwając kod JavaScript z równania. Jeśli ma styl, to powinien zawęzić problem, aby wydarzyło się coś dziwnego w JS. – jmbertucci

pan spróbować?

$.ajax({ type: "GET", 
    url: pageToLoad, 
    async: false, 
    success : function(data) 
    { 
     $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create'); 
     $('#index').css("backgroundColor", "#82e4e5"); 
     $('#portfolio').css("backgroundColor", "#fb5656"); 
    } 
});

Źródło

2013-09-06 02:34:35

Hej Lion, dziękuję za odpowiedź. Jednak chcę mieć możliwość kontrolowania CSS z samego arkusza stylów zamiast stosowania kolorów za pośrednictwem jQuery. Jest dużo więcej stylów, które muszę zrobić po tym, jak to działa (x Mam nadzieję! X). Czy wiesz, jak wymusić odświeżenie arkusza stylów po uruchomieniu AJAX? – Leann

Tak samo, jak w przypadku lebolo, wykonałem wywołanie ajaxowe, aby dodać coś do strony i wszyscy mogą bez problemu odczytać arkusz stylów. Czy możesz bardziej szczegółowo opisać swój problem? –

Wszyscy, zdecydowałem się wziąć jQuery w innym kierunku. Wydaje się, że działa lepiej ze stylami, które już istnieją. To pytanie nie jest już ważne. Dziękuję za odpowiedź! – Leann

Nie powinieneś wymagać odświeżania styli po wywołaniu AJAX. Czy na przykład można utworzyć jsFiddle?

Stworzyłem dla mnie jsFiddle. Ale musiałem otoczyć wstrzykiwalny kod HTML za pomocą div. Pozbyłem się też kodu .trigger('create').

Źródło

2013-09-06 02:59:11 lebolo

Style CSS nie odświeżają się po uruchomieniu AJAX

Odpowiedz

Powiązane problemy