-1
Ich versuche, eines der Demos auf jQuery Mobile auszuführen. Wenn ich jedoch den Quellcode kopiere und einfüge (obwohl ich die Links durch Google CDNs ersetzt habe), funktioniert es nicht richtig. In der Konsole heißt es: "Uncaught TypeError: Kann die Eigenschaft 'concat' von [hier sagt es ein paar Zeilennummern in jQuery Mobile] undefined" nicht lesen. Hier ist mein Code:JQuery Mobile funktioniert nicht
<!DOCTYPE html>
<html>
<head>
<title>Ben Gubler</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page" data-url="panel-responsive-page1">
<div data-role="header">
<h1>Panel responsive</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Panel responsive</h1>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
<div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->
<br>
<br>
<br>
<br>
<br>
<a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a>
</div><!-- /content -->
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-responsive-page2">Accordion</a></li>
<li><a href="#panel-responsive-page2">Ajax Navigation</a></li>
<li><a href="#panel-responsive-page2">Autocomplete</a></li>
<li><a href="#panel-responsive-page2">Buttons</a></li>
<li><a href="#panel-responsive-page2">Checkboxes</a></li>
<li><a href="#panel-responsive-page2">Collapsibles</a></li>
<li><a href="#panel-responsive-page2">Controlgroup</a></li>
<li><a href="#panel-responsive-page2">Dialogs</a></li>
<li><a href="#panel-responsive-page2">Fixed toolbars</a></li>
<li><a href="#panel-responsive-page2">Flip switch toggle</a></li>
<li><a href="#panel-responsive-page2">Footer toolbar</a></li>
<li><a href="#panel-responsive-page2">Form elements</a></li>
<li><a href="#panel-responsive-page2">Grids</a></li>
<li><a href="#panel-responsive-page2">Header toolbar</a></li>
<li><a href="#panel-responsive-page2">Icons</a></li>
<li><a href="#panel-responsive-page2">Links</a></li>
<li><a href="#panel-responsive-page2">Listviews</a></li>
<li><a href="#panel-responsive-page2">Loader overlay</a></li>
<li><a href="#panel-responsive-page2">Navbar</a></li>
<li><a href="#panel-responsive-page2">Navbar, persistent</a></li>
<li><a href="#panel-responsive-page2">Pages</a></li>
<li><a href="#panel-responsive-page2">New</a></li>
<li><a href="#panel-responsive-page2">Popup</a></li>
<li><a href="#panel-responsive-page2">Radio buttons</a></li>
<li><a href="#panel-responsive-page2">Select</a></li>
<li><a href="#panel-responsive-page2">Slider, single</a></li>
<li><a href="#panel-responsive-page2">New</a></li>
<li><a href="#panel-responsive-page2">New</a></li>
<li><a href="#panel-responsive-page2">New</a></li>
<li><a href="#panel-responsive-page2">Text inputs & textarea</a></li>
<li><a href="#panel-responsive-page2">Transitions</a></li>
</ul>
</div><!-- /panel -->
<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
<div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
</div>
</form>
</div><!-- /panel -->
</div>
</body>
</html>
Vielen Dank! Ich glaube, das Problem liegt in der Verlinkung ... vielleicht gibt es ein Problem mit der Verwendung des Google CDN? Früher, als ich die gleichen Quelldateien heruntergeladen habe, die jQuery für ihre Website verwendet hat, funktionierte es gut.
vom JQM Homepage: Neueste stabil: Version 1.4.5 kompatibel mit jQuery 1,8-1,11/2.1 - siehe auch hier: https://stackoverflow.com/a/44910517/4845566 – deblocker