jQuery Mobile 1.4.5 - błąd w nawigacji na dynamicznie tworzonej stronie

Od kilku godzin uderzam głową w ścianę i nadal nie mogę tego zmusić do działania.jQuery Mobile 1.4.5 - błąd w nawigacji na dynamicznie tworzonej stronie

Robię aplikację internetową, za pomocą szablonu wielostronicowy (mający wielu stron w moim index.html

Cel:.. dynamicznie utworzyć nową stronę, a następnie wyświetlenia tej strony na ekranie

problem: po utworzeniu strony, i stara się zmienić na tej stronie pojawia się następujący błąd: Error: Syntax error, unrecognized expression: :nth-child w jquery.mobile-1.4.5.js:1850:8

Odpowiedni kod można znaleźć poniżej :

JavaScript

// Add the page to the DOM     
$.mobile.pageContainer.append(page); 

// Change the page 
$.mobile.pageContainer.pagecontainer('change', $('#' + pageId));

HTML

strona została utworzona i dodana do <body>, więc będę pominąć część HTML.

Wydaje mi się, że strona nie została zarejestrowana w pliku pagecontainer, co oznacza błąd? Rozejrzałem się, ale nie wydaje się, że jest metoda odświeżania strony.

Wszelkie pomysły na rozwiązanie tego problemu?

Edit 1:

Stosując wspomniany kod, aby przejść do innej strony, na przykład strona działa dobrze. Jedyną stroną, która nie działa, jest nowo utworzona strona.

Edytowanie 2:

Wydaje się, że strona tworzę produkuje błąd. Kod używany do nawigacji do strony działał poprawnie.

Kod używam do tworzenia strony:

var page = $('<div/>', { 
     id: pageId, 
     'data-role': 'page', 
     'data-dom-cache': 'false', 
    }); 
var content = $('<div/>', { 
     'data-role': 'content', 
    }); 
var courseTabs = $('<div/>', { 
     'data-role': 'tabs', 
    }); 
var courseNavbar = $('<div/>', { 
     'data-role': 'navbar', 
    }).append($('<ul/>')); 
var courseBtn = $('<a/>', { 
     href: '#', 
     class: 'ui-btn', 
     text: 'testbutton', 
    }); 

// Glue the page parts together in the page. 
courseTabs.append(courseNavbar); 
content.append(courseTabs).append(courseBtn); 
page.append(content); 

// Add the page to the DOM 
$.mobile.pageContainer.append(page); 

// Navigate to the page 
$.mobile.pageContainer.pagecontainer("change", page, { 
    transition: "flip" 
});

powyższy kod błędu.

Źródło

2017-07-06 JiFus

Czy próbowałeś '.pagecontainer („zmiana”, strona) ; 'Czy używasz jQuery 3.x? Czy możesz dodać przykład strony dynamicznej? – Omar

@Omar Należy pamiętać, że funkcje pagecontainer działają dla każdej innej strony już istniejącej po zainicjowaniu aplikacji webapp. JQuery, którego używam, znajduje się w pakiecie pobierania jQuery Mobile. Można go znaleźć w następujący sposób: 'jquerymobile.com> pobierz najnowsze> wypakuj pliki'. Następnie w wyodrębnionej mapie: 'jquery.mobile-1.4.5> dema> js> jquery.mobile-1.4.5.js'. Zmieniłem nazwę pliku (na 'jquery.js'). – JiFus

Ile stron posiadasz w indeksie? Czy przechodzisz do innych plików poza plikiem indeksu? – Omar

Wierzę, że ta kwestia wymaga wyjaśnienia:

To nie jest jQuery błąd, to jQuery Komórka błąd. Komunikat o błędzie opublikowany w pytaniu jest błędny, ponieważ biblioteka jquery.mobile.js została zmieniona na jquery.js.

Używając standardowego jquery.mobile-1.4.5.min.js komunikat o błędzie jest:

Uncaught Error: Syntax error, unrecognized expression: :nth-child at jquery.mobile-1.4.5.min.js:3

ale należy pamiętać, numer linii może się zmieniać, jeśli zwyczaj pobierania służy lub jeśli używana jest wersja debugowania.
Podlegające widget: Navbar

Ten błąd ma mniej wspólnego z tworzeniem dynamicznych stron, ponieważ powstaje również na stronie statycznej. To może być łatwo testowane następujących znaczników:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
    <div data-role="navbar"> 
     <ul> 
     <!-- no <li> here --> 
     </ul> 
    </div> 
    <div data-role="content"> 
    </div> 
    </div> 
</body> 
</html>

Rozwiązanie: przynajmniej jeden <li> będzie wewnątrz pasku nawigacyjnym <ul>.

Ponieważ kwestia ta otrzymała wiele upvotes, tutaj są moje dwa centy o dynamicznym tworzeniu kawałek HTML z JQM:

projekt i testować ostateczne wynikowy fragment kodu HTML za pomocą JQM static strona, w Plunker.
Jeśli szablon statyczny działa, należy umieścić razem elementy HTML. Chciałbym użyć prostego łączenia tekstu, ale jest to kwestia indywidualnego stylu programowania i preferencji (nie traktuj serio zbyt poważnie) - przynajmniej jeśli masz do czynienia z dużym szablonem, tag zagnieżdżanie jest natychmiast jasne.
```
var html = [ 
    '<div data-role="navbar">', 
     '<ul>', 
      '<li><a href="'+link1+'" class="ui-btn-active">'+text1+'</a></li>', 
      '<li><a href="'+link2+'">'+text2+'</a></li>', 
     '</ul>', 
    '</div>' 
].join(""); 
```
Na koniec, należy append() tylko jednym razem.

Jeśli ktoś jest zainteresowany, miło byłoby usłyszeć informację zwrotną na temat wydajności różnych metod tworzenia szablonu/fragmentu HTML.

Uwaga na marginesie:

pytanie zawarte w tytule tego postu zostały już odebrane przez Omar dawno temu: jquery mobile Dynamically Injecting Pages

Źródło

2017-07-16 07:46:03 deblocker

Dzięki za odpowiedź! Zaktualizowałem tytuł pytania + plik mobilny jquery dla jasności – JiFus

jQuery Mobile 1.4.5 - błąd w nawigacji na dynamicznie tworzonej stronie

Odpowiedz

Powiązane problemy