// 创建按钮元素
var newButton = $('<button>').text('动态按钮');

// 添加到DOM
$('#container').append(newButton);

// 初始化为jQuery UI按钮
newButton.button();

$('<button>', {
    text: '带图标的按钮',
    click: function() {
        alert('按钮被点击!');
    }
}).appendTo('#container')
  .button({
    icons: {
        primary: 'ui-icon-plus'
    },
    disabled: false
});

var buttonSet = $('<div>').appendTo('#container');

$('<button>').text('左').appendTo(buttonSet);
$('<button>').text('中').appendTo(buttonSet);
$('<button>').text('右').appendTo(buttonSet);

buttonSet.buttonset();

// 确保调用了初始化方法
$(document).ready(function() {
    $('.my-button').button();
});

// 检查CSS文件是否正确引入

// 正确方式1 - 在创建时绑定
$('<button>').text('按钮').click(function() {
    // 处理点击
}).appendTo('#container').button();

// 正确方式2 - 使用事件委托
$('#container').on('click', 'button', function() {
    // 处理点击
});

// 禁用按钮
$('#myButton').button('option', 'disabled', true);

// 启用按钮
$('#myButton').button('option', 'disabled', false);

// 更改按钮文本
$('#myButton').button('option', 'label', '新文本');

// 最佳实践示例
var fragment = document.createDocumentFragment();

for (var i = 0; i < 10; i++) {
    $('<button>', {
        text: '按钮 ' + (i+1),
        class: 'dynamic-btn',
        click: function() {
            console.log($(this).text() + ' 被点击');
        }
    }).appendTo(fragment);
}

$('#container').append(fragment).find('.dynamic-btn').button();