jQuery UI 按钮图标：e.extra.match 不是函数
Posted
技术标签:
【中文标题】jQuery UI 按钮图标：e.extra.match 不是函数【英文标题】：jQuery UI button icon: e.extra.match is not a function 【发布时间】：2017-09-20 03:47:06 【问题描述】：尝试在jquery-ui button widget 中使用图标：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<span class="ui-icon ui-icon-gear"></span>
<button id="btn">Button</button>
<script>
$("#btn").button(
icon: icon: "ui-icon-gear"
);
</script>
</body>
</html>
我收到以下错误：
未捕获的类型错误：e.extra.match 不是函数 在 t.(匿名函数).(匿名函数)._classes (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:8956) 在 t.(匿名函数).(匿名函数)._toggleClass (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9473) 在 t.(匿名函数).(匿名函数)._addClass (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9265) 在 t.(匿名函数).(匿名函数)._updateIcon (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:8:17888) 在 t.(匿名函数).(匿名函数)._updateIcon (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) 在 t.(匿名函数).(匿名函数)._enhance (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:8:17358) 在 t.(匿名函数).(匿名函数)._enhance (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) 在 t.(匿名函数).(匿名函数)._create (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:8:17057) 在 t.(匿名函数).(匿名函数)._create (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) 在 t.(匿名函数).(匿名函数).t (https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4326)
关于如何解决此问题的任何提示？
【问题讨论】：
您是否要在您的按钮中保留“按钮”文本？还是您想影响一个仅图标的按钮？ @Ito Pizarro 最终目标是拥有一个仅图标按钮，但无论按钮是否带有文本，我都会收到该错误 【参考方案1】：您正在冗余地复制配置对象。
$( [selector] ).button(
icon: "ui-icon-gear" // you don't have to pass `icon` its own object here
);
而且，要抑制“按钮”文本，您可以添加 showLabel: false 属性。
此外，您的<span class="ui-icon ui-icon-gear"></span> 无需在button 中呈现图标。
$("#button-example-1").button(
icon: "ui-icon-gear"
);
$("#button-example-2").button(
icon: "ui-icon-gear",
showLabel: false
);<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button id="button-example-1">Button with icon and text</button>
<button id="button-example-2">Icon only button</button>【讨论】：
谢谢，jquery docs 上的代码 sn-p 让我很困惑。 span 图标只是为了表明 jquery 图标类工作正常以上是关于jQuery UI 按钮图标：e.extra.match 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 按钮图标：e.extra.match 不是函数
将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用