JQuery Mobile: Style dynamically created elements

Question

I am using JQuery to create two buttons:

      mapbutton = '<a class="mapbtn" rel="external" data-role="button" href="map.html?longlat='+ coords +' ">Map</a>';
      $('.event').append(mapbutton);

      var input = '<a href="#" data-role="button" class="save_event">Save to Planner</a>';
      $('.event').append(input);

I have added the required data-role="button" to get JQuery Mobile to style them but still then appear just as normal links.

I am guessing this is because JQM styles the DOM elements before the scripts run.

Would anyone know how to alter this so that JQM styles these dynamically created elements as well?

Answer 1

You can invoke button widget on the dynamically created element to appear as JQM button widget using .button()

var mapbutton = '<a class="mapbtn" rel="external" data-role="button" href="map.html?longlat=' + coords + ' ">Map</a>';

$('.event').append($(mapbutton).button());

var input = '<a href="#" data-role="button" class="save_event">Save to Planner</a>';
$('.event').append($(input).button());

Demo

See Documentation