Avatar billede llSimsll Nybegynder
22. april 2013 - 10:14 Der er 6 kommentarer

jQuery load-funktion

Hej alle sammen, jeg har lavet en side hvor jeg henter andre sider ind i et div tag, problemet er at når den første side er hentet ind i div'et, og jeg vil hente en ny side fra den der allerede er hentet virker jQuery scriptet ikke som første gang.

jQuery'en ser sådan ud:

$(document).ready(function(){
    $('a[rel="fade"]').live('click', function() {
        var toLoad = $(this).attr('href');
        $('#content').fadeOut('fast', loadContent);
        function loadContent() {
            $('#content').load(toLoad, showNewContent);
        }
        function showNewContent() {
            $('#content').fadeIn('slow');
        }
        return false;

    });
});

Hvis min beskrivelse er helt uforståelig, kan jeg forsøge at omformulere.
Avatar billede jakobdo Ekspert
22. april 2013 - 11:09 #1
live er deprecated.
Så måske det kan være fejlen?

Du skal bruge .on(...)
Avatar billede llSimsll Nybegynder
22. april 2013 - 11:16 #2
Jeg har lige forsøgt med live, før brugte jeg denne linje:

$('a[rel="fade"]').click(function(){

Det gir præcis samme resultat.
Jeg har en ide om at den første sider der bliver hentet ind i div'et ikke kan "se" at der er en div med navnet "content", som den næste siden skal hentes ind i.
Avatar billede jakobdo Ekspert
22. april 2013 - 11:24 #3
Kunne du vise lidt mere kode?
Evt. smid din funktion i noget jsfiddle?
Avatar billede llSimsll Nybegynder
22. april 2013 - 12:34 #4
Tænkt elsempel:

index.html indeholder mit jQuery script og
<div id="menu"><a href="side1.html" rel="fade">Link 1</a></div>
<div id="content">Du ser forsiden</div>

Side 1 indeholder:
Du ser side1.html
<a href="side2.html" rel="fade">Link 2</a>

Side 2 indeholder:
Du ser side2.html
<a href="side3.html" rel="fade">Link 3</a>

Når man klikker på Link2 sker der intet via jQuery, men det åbnes bare som et normalt link.
Avatar billede jakobdo Ekspert
22. april 2013 - 12:34 #5
Prøv denne:

$(document).ready(function(){
  $("DIV_ELLER_NAV_OMKRING_DINE_A_TAGS").on('click', 'a[rel="fade"]', function(){
    var toLoad = $(this).attr('href');
    $('#content').fadeOut('fast', loadContent);
    function loadContent() {
      $('#content').load(toLoad, showNewContent);
    }
    function showNewContent() {
      $('#content').fadeIn('slow');
    }
    return false;
  });
});
Avatar billede olebole Juniormester
22. april 2013 - 15:41 #6
<ole>

Det giver ikke mening at loade et helt HTML-dokument i et DIV. Man loader en del af siden - i stil med:

$('#content').load(toLoad + " #element_to_load", showNewContent);


- og så er fade i øvrigt ikke en valid værdi på en rel attribut. Det er en misforstået brug af attributten.

I stedet kan du bruge class attributten, som heller ikke er særlig hensigtsmæssig. I HTML5 har man implementeret data-* attributterne specielt til den slags, så skriver du HTML5, bør du bruge sådan en

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester