CODEWITHSUNDEEP
jqueryjquery-mobile
MeltingDog
MeltingDog

Reputation: 15404

JQuery Mobile: Style dynamically created elements

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?

Upvotes: 0

Views: 235

Answers (1)

PSL
PSL

Reputation: 123739

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

Upvotes: 1

Related Questions