jQuery UI的按鈕圖標：e.extra.match不是一個函數

試圖在jquery-ui button widget使用的圖標：jQuery UI的按鈕圖標：e.extra.match不是一個函數

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

我得到了以下錯誤：

關於如何解決這個問題的任何提示？

來源

2017-04-23 revy

你們是不是要保存在您的按鈕的「按鈕」的文字？或者你是否試圖影響只有圖標的按鈕？ –

@Ito Pizarro最終目標是擁有一個只有圖標的按鈕，但無論該按鈕是否帶有文本，我都會收到該錯誤 – revy

您冗餘地複製了您的配置對象。

$([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>

來源

2017-04-23 13:20:46

謝謝jquery docs上的代碼片段讓我困惑。 span圖標只是爲了顯示jquery圖標類正常工作 – revy

jQuery UI的按鈕圖標：e.extra.match不是一個函數

回答

相關問題