Question

我有以下代码：

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'，我也会得到与模拟器中相同的结果。

我该如何解决这个问题？

谢谢！

Answer 1

尝试以下两件事：

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

2使用jQuery设置CSS，而不是类。附加创建的DOM元素后，运行以下命令：

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

以下是您更新的 FIDDLE

此外，代替jQuery document.ready，使用其中一个jQM init事件，如：

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

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

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

1 个答案: