jquery-mobile - 在动态创建的元素上使用 buttonMarkup

Question

我有一个可拖动和可放置的 jquery。拖放的元素是从可拖动元素中克隆出来的。拖放的元素是一个简单的 jQuery 移动按钮。

当我尝试使用 buttonMarkup() 方法修改动态创建（删除）的元素时，它会产生一些奇怪的结果。< a >标签的内容加倍。我说的是由 jquery mobile 创建的 span 元素。

http://jsfiddle.net/z4gnT/1/

这是一个简单的jsfiddle。在这种情况下，为了简单起见，我使用了一个简单的克隆而不是可拖放/可拖放。

Answer 1

原因是因为额外的样式是应用程序你必须这样做：

• 创建一个data-role设置为的 HTML 锚点none。这将停止它的样式。默认隐藏此元素

  <div class="button-container">     
    <a data-role="button" data-theme="b">Button</a>
    <a class="cloner" data-role="none" data-theme="b">Button</a>
  </div>
  

• 现在您可以使用此按钮进行克隆。

  $("#add-icon-button").click(function () {
    //get the button and set it with button data-role and add button markup to it
    var $button = $(".cloner").clone().attr("data-role", "button").buttonMarkup({
      icon: "star"
    }).removeClass("cloner");
    //add the variable inside
    $("#new").html($button);
  });
  

演示：http: //jsfiddle.net/hungerpain/z4gnT/2/