jQuery移动弹出窗口关闭按钮并非始终有效

我正在使用jquery mobile 1.4.5。在某些情况下，当用户单击链接并用ajax调用的结果填充该弹出窗口时，我会生成一个弹出窗口。在ajax调用返回后，从firebug中获取的生成代码如下所示：

<div id="detailsPopup-popup" class="ui-popup-container ui-popup-active" tabindex="0" style="max-width: 1250px; top: 68.9967px; left: 146px;">
<div id="detailsPopup" class="ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all" data-role="popup" style="width: 971.538px;"><a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" data-iconpos="notext" data-icon="delete" data-theme="a" data-role="button" data-rel="back" href="#">Close</a>
<div data-theme="a" data-role="header">
  ...content...
</div>
</div>
</div>

弹出窗口显示正常。我会说90％的时间，当我单击关闭按钮时，弹出窗口关闭。但是，有10％的时间只是坐在那里。通常，它将关闭按钮突出显示为蓝色，表示它处于活动状态或其他状态，但窗口本身保持打开状态。如果我在弹出框中单击几次并继续尝试，它将最终关闭，但它非常令人沮丧并且对用户不友好。

我不确定为什么在这么短的时间内不起作用？我提供了模态外观的屏幕截图。我不知道父div（蓝色轮廓）是否以某种方式覆盖了按钮的一半，因此有时会引起点击？

关于这里发生的事情有什么想法吗？我只能尝试使用android / chrome而不是iphone，所以我不知道它是否特定于浏览器。

谢谢！

编辑：添加解析ajax响应并生成窗口的javascript代码。注意：我知道我现在将所有内容都放在标题div中（出于填充目的），但是我不认为这是造成此问题的原因。为了简洁起见，我删除了很多窗口内容。

function showPopup(jsonResponse){

    // parse json response
    var obj = jQuery.parseJSON( jsonResponse );

     // close button
    var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>').button();

    // start to construct window contents from response
    var content = "<div data-role=\"header\" data-theme=\"a\">";

     content += '<table border="0" style="width:100%"><tr>';
     content += '<td style="vertical-align:top;">';
     content += '<a data-ajax="false" href="show.php?id='+obj.id+'"><img src="'+obj.pic+'" style=\"max-height: 2em;\"></a><br><b>'+obj.title+'</b></div>';
     content += '</td></tr></table>';

     // close header div
     content += '</div>';

    // Popup body - set width is optional - append button and Ajax msg (was 1.5 width originally)
    var popup = $("<div/>", {
        "id": "detailsPopup",
        "data-role": "popup",
          "class": "ui-content"
    }).css({
        "width": $(window).width() / 1.3 + "px"
    }).append(closeBtn).append(content);

    // Append it to active page
    $(".ui-page-active").append(popup);

    // Create it and add listener to delete it once it's closed
    // open it
    $("#detailsPopup").on("popupafterclose", function () {
        $(this).remove();
    }).on("popupafteropen", function () {
        $(this).popup("reposition", {
            "positionTo": "window"
            //x: 150,
            //y: 200
        });
    }).popup({
        "dismissible": false,
            "history": false,
            "theme": "a",
            "overlayTheme": "b",
                "class" : "ui-content"
    }).popup("open");

} // end showPopup