使用 jQuery $('') 语法动态创建的按钮为空

Question

当我单击带有 .canActivate 类的按钮时，它会将我带到指定的 div 并显示该按钮。但是，如果我单击返回并单击相同的按钮（或具有相同类别的另一个按钮），它只会显示一个空按钮。问题是什么？

我有以下代码：

$('.canActivate').live('vclick', function (event) {
    $('#lblServiceName').text($(this).html());
    $('#lblServiceId').text($(this).attr('data-serviceId'));
    $('#lblServiceSubId').text($(this).attr('data-serviceSubId'));
    $('#lblServicePrice').text($(this).attr('data-price'));

    $('#wrapperServiceButtonDiv').empty();
    $('<button type="button" id="btnActivateService" value="Activate" />').appendTo('#wrapperServiceButtonDiv');

    $.mobile.changePage('#serviceDetailsDiv', 'slide', true, true);
});

Answer 1

首先，您的活动看起来有问题。您有：

$('.canActivate').live('vclick', function (event) {

而且我确信您的意思是：

$('.canActivate').live('click', function (event) {

通过空按钮，我假设您的意思是其中没有文本。这是因为您创建了一个空按钮，其中包含以下行：

<button type="button" id="btnActivateService" value="Activate" />

如果您想要在其上添加标签，请使用：

<button type="button" id="btnActivateService" value="Activate">Click me</button>

由于您没有发布 HTML，所以我不明白为什么它在第一次单击时起作用。

另外，您可以通过将按钮添加链接到空来保存查找：

$('#wrapperServiceButtonDiv').empty().append(
    '<button type="button" id="btnActivateService" value="Activate">Click Me</button>');