1
我的JavaScript組件沒有渲染，我發現了以下錯誤：JavaScript是不是一個函數
TypeError: $(...).cytoscape is not a function
下面是引發錯誤的代碼。
本質上我試圖隔離什麼JavaScript呈現到行的內容。當我運行這個沒有嵌套在一個容器中，然後它工作正常。
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/css/graph4.css">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="background-color:lavender;">
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
\t <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script>
\t \t $(function(){ // on dom ready
\t \t
\t \t $('#cy').cytoscape({
\t \t layout: {
\t \t name: 'cose',
\t \t padding: 10,
\t \t randomize: true
\t \t },
\t \t
\t \t style: cytoscape.stylesheet()
\t \t .selector('node')
\t \t .css({
\t \t 'shape': 'data(faveShape)',
\t \t 'width': 'mapData(weight, 40, 80, 20, 60)',
\t \t 'content': 'data(name)',
\t \t 'text-valign': 'center',
\t \t 'text-outline-width': 2,
\t \t 'text-outline-color': 'data(faveColor)',
\t \t 'background-color': 'data(faveColor)',
\t \t 'color': '#fff'
\t \t })
\t \t .selector(':selected')
\t \t .css({
\t \t 'border-width': 3,
\t \t 'border-color': '#333'
\t \t })
\t \t .selector('edge')
\t \t .css({
\t \t 'curve-style': 'bezier',
\t \t 'opacity': 0.666,
\t \t 'width': 'mapData(strength, 70, 100, 2, 6)',
\t \t 'target-arrow-shape': 'triangle',
\t \t 'source-arrow-shape': 'circle',
\t \t 'line-color': 'data(faveColor)',
\t \t 'source-arrow-color': 'data(faveColor)',
\t \t 'target-arrow-color': 'data(faveColor)'
\t \t })
\t \t .selector('edge.questionable')
\t \t .css({
\t \t 'line-style': 'dotted',
\t \t 'target-arrow-shape': 'diamond'
\t \t })
\t \t .selector('.faded')
\t \t .css({
\t \t 'opacity': 0.25,
\t \t 'text-opacity': 0
\t \t }),
\t \t elements: {
\t \t nodes: [
\t \t { data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
\t \t { data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
\t \t { data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
\t \t { data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
\t \t ],
\t \t edges: [
\t \t { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
\t \t { data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
\t \t { data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },
\t \t
\t \t { data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
\t \t { data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
\t \t
\t \t { data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
\t \t { data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
\t \t { data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },
\t \t
\t \t { data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } }
\t \t ]
\t \t },
\t \t
\t \t ready: function(){
\t \t window.cy = this;
\t \t
\t \t // giddy up
\t \t }
\t \t });
\t \t
\t \t }); // on dom ready
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t </script>
<div id="cy"></div>
\t <p>Test</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12" style="background-color:lavenderblush";>
Timeline
</div>
</div>
</div>
<footer class="footer">
<p>
<center>
<span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span>
Test
</center>
</p>
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
你有一個匿名的關閉函數，你認爲'當dom準備好'爲什麼不明確地做一個'$（document）.ready ...'並且看它是否有效呢？ – jdmdevdotnet
無論如何這意味着什麼。 Dom Ready。只有在頁面完全加載後腳本纔會運行。 – ForgottenKahz
這個問題可能與初始化圖形時有關。根據其他SO職位。該圖必須在引導後初始化。 – ForgottenKahz