JQuery Mobile：样式动态创建的元素答案

【问题标题】：JQuery Mobile: Style dynamically created elementsJQuery Mobile：样式动态创建的元素
【发布时间】：2013-06-02 07:16:01
【问题描述】：

我正在使用 JQuery 创建两个按钮：

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

我已添加所需的data-role="button" 以让 JQuery Mobile 设置它们的样式，但仍会像普通链接一样显示。

我猜这是因为 JQM 在脚本运行之前设置了 DOM 元素的样式。

有谁知道如何改变这一点，以便 JQM 也为这些动态创建的元素设置样式？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

您可以使用 .button() 在动态创建的元素上调用按钮小部件以显示为 JQM 按钮小部件

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

见Documentation

【讨论】：