jquery - 按钮在函数调用时丢失格式

Question

在我的 jquery 代码中，按钮基于 ajax 调用和 json 数据附加到页面，如下所示

function appendButton() {
    $('#list').append('<div class="ui-block-a"><a class="request" data-role="button" data-id=\"'+json[i].num+'\" data-type="1" data-icon="plus" data-iconpos="right">Pro</a></div>');
}

单击按钮时，我想起了 ajax 函数（如上所示的重要部分）

$(document).on('click', '.request', function() {

     var type = $(this).data('type');
     var id = $(this).data('id');

    $.ajax({
        url: 'someurl',
        crossDomain: true,
        type: 'post',
        data: {
            "type" : type,
            "num" : debateID,
            "userID": userID
        },
        success: function (data) {

            appendButton();

        }
    });
});

因此，按钮被“重新加载”到不同的东西，但它失去了格式，只显示按钮文本

我怎样才能解决这个问题？

Answer 1

create您应该在新附加的元素上触发事件，如下所示：

function appendButton() {
    $('#list').append('<div class="ui-block-a"><a class="request" data-role="button" data-id="'+json[i].num+'" data-type="1" data-icon="plus" data-iconpos="right">Pro</a></div>').trigger('create');
}

它在这里工作： http: //jsfiddle.net/BYLbM/（在我的示例中，我使用的是硬编码data-id值和减少的点击事件）