CODEWITHSUNDEEP
jqueryajaxjquery-mobilebuttonformat
nshah
nshah

Reputation: 597

Buttons Lose Formatting On Function Call

In my jquery code, buttons are appended to the page based on an ajax call and json data like so

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>');
}

When the button is clicked on, i recall the ajax function (important part shown above)

$(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();

        }
    });
});

So, the button is "re-loaded" to something different, but it loses its formatting and only shows the button text

How can I fix this?

Upvotes: 2

Views: 46

Answers (1)

Joe
Joe

Reputation: 15528

You should trigger the create event on the newly appended element, like this:

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');
}

Here it is working: http://jsfiddle.net/BYLbM/ (I'm using a hardcoded data-id value and a cut down click event in my example)

Upvotes: 2

Related Questions