Button created dynamically with jQuery $('<button>') syntax is empty

Question

When I click a button with the .canActivate class it takes me to the designated div and shows the button. However if I click back and click the same button (or another button with the same class for that matter) it only shows an empty button. What is the problem?

I have the following code:

$('.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

First, your event looks wrong. You have:

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

And I'm sure you mean:

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

By empty button, I'm assuming you mean no text in it. That is because you created an empty button with the line:

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

If you want a label on it, use:

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

Since you didn't post your HTML, I can't see why it worked on the first click.

Also, you can save a lookup by chaining the button add to the empty:

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