jQuery UI 按钮图标：e.extra.match 不是函数

Question

<!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>

我收到以下错误：

关于如何解决这个问题的任何提示？

Answer 1

您正在冗余地复制您的配置对象。

$( [selector] ).button( {
    icon: "ui-icon-gear" // you don't have to pass `icon` its own object here
} );

并且，要隐藏 "Button" 文本，您可以添加 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 UI 按钮图标：e.extra.match 不是函数

jQuery UI button icon: e.extra.match is not a function

html

icons

jquery-ui

widget

button