Javascript FirefoxOS emulator和JSFIDLE给出了不同的结果

我有以下代码：

HTML:

Javascript:

我使用相同的代码在firefoxOS emulator上运行webapp。但是我得到了一个不同的结果。这是我在模拟器上得到的结果：

在JSFIDLE上，删除图标按应有的方式显示。但是在emulator上，删除按钮出现在可折叠的标题下面。即使在普通浏览器中打开'index.html'，我也会得到与模拟器相同的结果

我该如何解决这个问题

谢谢

试试这两件事：

我将btn delete类放在列表的末尾，而不是类列表中的第一个，看看它是否有任何区别

2不用类，只需使用jQuery设置CSS。附加创建的DOM元素后，运行以下操作：

$btnDel.css({"position": "absolute", "top": "0", "right": "2px", "zIndex": "10000"});

这是您的最新信息

另外，请使用以下jQM初始化事件之一，而不是jQuery document.ready：

$(document).on("pageinit", function() {...

如果jQM仍在重写类，请尝试在pageinit中附加DOM元素，然后在pageshow中设置CSS

    $(document).ready(function() {
    var $containerWrapper = $('.container-wrapper');

/*..............FOR TESTING...................
    //var $btnDelItem1 = $('#delColl1').detach();
    //$('#coll1').append($btnDelItem1);
 ..............................................*/

    for(var i=1; i<=5; i++) {
      var $containerDiv = $('<div>', {'class':'container'})
      var $divCol = $('<div>', {'data-role':'collapsible', 'id':'coll'+i});
      var $btnDel = $('<a>', {'href':'#', 'class':'btn-delete ui-btn ui-icon-delete ui-corner-all ui-btn-icon-notext', 'id':'btnDel'+i});
      var $colHead = $('<h3>', {'text':'Item '+i});
      var $colContent = $('<p>', {'text':'This is item '+i});


      $containerDiv.append($divCol);  
      $divCol.append($colHead);
      $divCol.append($colContent);
      $containerWrapper.append($containerDiv);
      $containerWrapper.trigger('create');    
      $divCol.append($btnDel);
    }
  });

$btnDel.css({"position": "absolute", "top": "0", "right": "2px", "zIndex": "10000"});

$(document).on("pageinit", function() {...