FirefoxOS 模拟器和 JSFiddle 给出不同的结果答案

【问题标题】：FirefoxOS emulator and JSFiddle giving different resultFirefoxOS 模拟器和 JSFiddle 给出不同的结果
【发布时间】：2014-01-14 09:26:26
【问题描述】：

我有以下代码：

http://jsfiddle.net/xFzy8/4/

HTML：

<body>
<!-- ..................... Page 1 - HOME ..................... -->
<!-- ......................................................... -->
  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed">
      <h3>My Test App</h3>
    </div>

    <div data-role="content">
      <div class="container-wrapper">

        <!--
   ..................FOR TESTING ONLY..................
        <div class="container">
          <div data-role="collapsible" id="coll1">              
            <a href="#" class="btn-delete ui-btn ui-icon-delete ui-corner-all ui-btn-icon-notext" id="delColl1">Delete</a>
            <h3>Item 1</h3>
            <p>This is item 1</p>
          </div>
        </div>
    ..................................................
        -->

      </div>
    </div>
  </div>
</body>

CSS：

.btn-delete{
    position:absolute;
    top:0;
    right:2px;
    display:block !important;
    z-index:10000;
}

.ui-collapsible {
    position: relative;
}

Javascript：

    $(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);
    }
  });

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

http://imagizer.imageshack.us/v2/800x600q90/208/mzv6.jpg

在 JSFiddle 上，删除图标按原样显示。但在模拟器上，删除按钮出现在可折叠标题下方。即使我在普通浏览器中打开“index.html”，我得到的结果与在模拟器中相同。

我该如何解决这个问题？

谢谢！

【问题讨论】：

标签： javascript jquery html jquery-mobile firefox-os

【解决方案1】：

试试这两件事：

1 将btn-delete 类放在列表的末尾，而不是放在类列表的首位，看看是否有什么不同。

2 不用类，只需使用 jQuery 来设置 CSS。添加创建的 DOM 元素后，运行：

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

这是您更新的FIDDLE

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

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

如果 jQM 仍然覆盖您的类，请尝试在 pageinit 中附加 DOM 元素，然后在 pageshow 中设置 CSS。

【讨论】：