Appending Anchor tag to jQuery Mobile Header not working

Question

I would currently like to dynamically add an anchor to a data-role = "header" div. I currently have the following code:

HTML

<div data-role ="header">
     <div  id="SignUp"></div>
</div>

Javascript

$('#SignUp').append('<a data-icon="star" href="#" data-role="button" id="SignUpLink">Sign Up</a>');
$("#SignUpLink").trigger('create');

The problem I am having is that the it's not producing the following:

But rather the code found Here. I've tried to refresh the SignUpLink with .trigger() and .button('refresh'). But that also doesn't seem to work. I'm not really not sure how to fix the problem found in the jsFiddle...

Answer 1

Working example: http://jsfiddle.net/Gajotres/AtKhs/

When appending content to page header or footer another function must be used.

.trigger('pagecreate');

Unlike trigger('create') which enhances only content, trigger('pagecreate') will try to enhance everything.

Read more about it in my blog article HERE, look for a chapter called: Enhance a full page content. Working example can be found there.

Answer 2

This problem can be solved much more easily this way: swapping .trigger("create") place:

$('#SignUp').append('<a data-icon="star" href="#" data-role="button" id="SignUpLink">Sign Up</a>').trigger('create');

test and see which will work perfectly and save lines of code.

with this you eliminate the second line

$("#SignUpLink").trigger('create');