jquery-ui 显示未捕获的类型错误
Posted
技术标签:
【中文标题】jquery-ui 显示未捕获的类型错误【英文标题】：jquery-ui is showing uncaught type errors 【发布时间】：2021-06-03 20:06:00 【问题描述】：每次尝试单击下拉菜单时，我在 jquery-ui 中使用 Selectmenu 时遇到问题，它会在控制台中显示此错误：
Uncaught TypeError: Cannot read property 'index' of undefined
我已经为此导入了所有需要的文件，例如 jquery、jquery-ui 和所有需要的组件以使其正常工作。有什么想法会导致错误吗？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<link rel ="stylesheet" href = "bootstrap-4.3.1-dist/css/bootstrap.min.css"/>
<link rel ="stylesheet" href = "fontawesome-free-5.15.2-web/css/fontawesome.min.css"/>
<!-- Jquery UI-->
<link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.css"/>
<link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.structure.css"/>
<link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.theme.css"/>
<!-- xxxx-->
<script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="fontawesome-free-5.15.2-web/js/fontawesome.min.js"></script>
<script src="main.js"></script>
<script>
$( function()
$.widget( "custom.iconselectmenu", $.ui.selectmenu,
_renderItem: function( ul, item )
var li = $( "<li>" ),
wrapper = $( "<div>", text: item.label );
if ( item.disabled )
li.addClass( "ui-state-disabled" );
$( "<span>",
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
)
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
);
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
);
</script>
<div id="main" style="height: 100%; width: 100%;">
<script>
$(function()
$("#main").load("header.html");
);
</script>
</div>
<style>
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper
padding: 0.5em 0 0.5em 3em;
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon
height: 24px;
width: 24px;
top: 0.1em;
.ui-icon.video
background: url("logo-small.png") 0 0 no-repeat;
.ui-icon.podcast
background: url("logo-small.png") 0 0 no-repeat;
.ui-icon.rss
background: url("logo-small.png") 0 0 no-repeat;
</style>
</head>
<body>
<div id="lineContent" style="width:100%;">
<div class="row" style = "margin:0px;padding:0px;">
<div class="col-md-12" style="margin:0px;padding:0px;">
<div class = "row">
<div class = "col-md-2" style="margin:0px;padding:0px;">
</div>
<div class = "col-md-10" style ="margin:0px;padding:0px;">
<div style="margin-bottom: 30px;">
<p><a href="accounts.html">Add Account </a>>> LINE</p>
</div><br>
<form name="lineform" id = "line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
<div>
<p class="labels required">Channel Name:</p>
<p class="labels"><input pattern="^[a-zA-Z\s]+$" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" style = "width:50%" value="" placeholder="Enter your Channel Name" required></p>
</div><br>
<div>
<p class="labels required">Channel Id:</p>
<p class="labels "><input type="text" id="chid" name="chid" value="" style = "width:50%" placeholder="Enter your Channel ID" required></p>
</div><br>
<div>
<p class="labels required">Channel Access Token:</p>
<p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style = "width: 50%" required></p>
</div><br>
<div><i class="fa fa-line"></i></i></div>
<div class = "select">
<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
<option value="myvideo" data-class="video">Scott González Video</option>
<option value="myrss" data-class="rss">jQuery RSS XML</option>
</select>
</fieldset>
</div>
<div>
<button style="background-color:#1f73b7!important;"class="btn btn-primary" type="submit">Submit</button>
</div><br>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
非常感谢。
【问题讨论】：
如果没有显示错误的功能示例，将很难为您提供帮助.... 在您的代码中发现了一个额外的</i>。它可能会导致一些 HTML 问题。
【参考方案1】：
当我运行稍微干净的代码版本时，我无法重现该问题。
$(function()
$.widget("custom.iconselectmenu", $.ui.selectmenu,
_renderItem: function(ul, item)
var li = $("<li>"),
wrapper = $("<div>",
text: item.label
);
if (item.disabled)
li.addClass("ui-state-disabled");
$("<span>",
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
)
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
);
$("#filesB")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons customicons");
);/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper
padding: 0.5em 0 0.5em 3em;
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon
height: 24px;
width: 24px;
top: 0.1em;
.ui-icon.video
background: url("logo-small.png") 0 0 no-repeat;
.ui-icon.podcast
background: url("logo-small.png") 0 0 no-repeat;
.ui-icon.rss
background: url("logo-small.png") 0 0 no-repeat;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="lineContent" style="width:100%;">
<div class="row" style="margin:0px;padding:0px;">
<div class="col-md-12" style="margin:0px;padding:0px;">
<div class="row">
<div class="col-md-2" style="margin:0px;padding:0px;"></div>
<div class="col-md-10" style="margin:0px;padding:0px;">
<div style="margin-bottom: 30px;">
<p><a href="accounts.html">Add Account </a>>> LINE</p>
</div><br>
<form name="lineform" id="line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
<div>
<p class="labels required">Channel Name:</p>
<p class="labels"><input pattern="^[a-zA-Z\s]+$" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" style="width:50%" value="" placeholder="Enter your Channel Name" required></p>
</div><br>
<div>
<p class="labels required">Channel Id:</p>
<p class="labels "><input type="text" id="chid" name="chid" value="" style="width:50%" placeholder="Enter your Channel ID" required></p>
</div><br>
<div>
<p class="labels required">Channel Access Token:</p>
<p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 50%" required></p>
</div><br>
<div><i class="fa fa-line"></i></div>
<div class="select">
<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
<option value="myvideo" data-class="video">Scott González Video</option>
<option value="myrss" data-class="rss">jQuery RSS XML</option>
</select>
</fieldset>
</div>
<div>
<button style="background-color:#1f73b7!important;" class="btn btn-primary" type="submit">Submit</button>
</div><br>
</form>
</div>
</div>
</div>
</div>
</div>这表明您的 javascript 代码中存在错误。您需要清理代码并确保没有语法错误。
【讨论】：
以上是关于jquery-ui 显示未捕获的类型错误的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：$(...).draggable 不是函数 [重复]
为啥 Firebug 不为未定义的属性显示“未捕获的类型错误”？
未捕获的 TypeError: $(...).autocomplete 不是 JQuery-UI 中的函数