jQuery button not showed as a jQuery button in a tabbed page
I have a button in a jQuery tabbed page declared like this:
<input id="buttonSave" type="submit" value="Save" />
I also have the script below:
$('#buttonSave').button();
$("#buttonSave").live('click', function () {
alert('Button clicked');
});
When the 开发者_如何转开发button is clicked I have the message 'Button clicked'. That's ok. But the button has not the look'n feel of a jQuery button.
Any idea?
To be clear, I add here some screenshots.
Below you can see my page with the tabbed page at the bottom.
I trigger the script below in order to render my buttons as jQuery buttons:
$(":button").button();
This script update my page as showed below:
As you can see, only the button located on the main page is rendered as jQuery. Others buttons (located on the tabbed page) didn't render correctly.
Try this: Change your live function to bind. If you don't see a 'Button clicked' message, try to put your script after the html code.
Perhaps you forgot to include css file for jQuery UI in your html page markup.
Are you sure you that you also included the jqueryUI library and the relevant css file?
Otherwise your button won't be styled.
<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" />
Make sure that you have linked JQuery CSS files properly. Example:
<head>
...
<link type="text/css" rel="stylesheet" href="script/jquery-ui.css"/>
...
</head>
Good Luck :)
Did you ensure all your dom elements were rendered before you tried to convert them to the jquery UI style?
// Document ready
$(function()
{
$(":button").button();
}
加载中,请稍侯......
精彩评论