Question

我在jQuery选项卡页面中有一个按钮，声明如下：

<input id="buttonSave" type="submit" value="Save" />

我也有以下脚本：

$('#buttonSave').button();
$("#buttonSave").live('click', function () {
    alert('Button clicked');
});

单击该按钮时，我显示“单击按钮”消息。没关系。但是按钮没有看起来像jQuery按钮。

有什么想法吗？

要说清楚，我在这里添加一些截图。

下面您可以看到我的页面底部带有标签页。

enter image description here

我触发下面的脚本，以便将我的按钮渲染为jQuery按钮：

$(":button").button();

此脚本更新我的页面，如下所示：

enter image description here

如您所见，只有主页面上的按钮呈现为jQuery。其他按钮（位于选项卡页面上）无法正确呈现。

Answer 1

也许你忘了在你的html页面标记中包含jQuery UI的css文件。

Answer 2

您确定还包含了jqueryUI库和相关的css文件吗？

否则您的按钮将无法设置样式。

<link rel="stylesheet" href="YOUR-PATH_HERE/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" title="no title" charset="utf-8" />

Answer 3

确保您已正确链接JQuery CSS文件。例如：

<head>
 ...
 <link type="text/css" rel="stylesheet" href="script/jquery-ui.css"/>
 ...
</head>

祝你好运：）

Answer 4

试试这个：将live功能更改为bind。如果您没有看到“点击按钮”消息，请尝试将您的脚本放在html代码之后。

Answer 5

在尝试将所有dom元素转换为jquery UI样式之前，您是否确保渲染了所有dom元素？

// Document ready
$(function()
{
    $(":button").button();
}