DIV中显示的关闭按钮在第一次点击(或点击)时无响应

时间:2014-09-18 18:52:41

标签: javascript jquery ajax jquery-mobile

我有一个问题,在第一次尝试时,显示的DIV没有关闭。用户必须至少在页面上的任何位置单击一次 - 不必是关闭按钮,然后才能单击“关闭”以实际关闭DIV。首先,在DIV之前有一个短暂的领先。

我在页面中使用jquery移动弹出窗口包含单个文本字段和提交按钮。它看起来像这样(减去布局)。用户通过此弹出窗口提交他们的注释。

<div data-role="popup" id="popupBasic"  data-corners="false">
    <textarea rows="9" name="note" id="AttitionalNoteText"></textarea>
    <a href="#" data-mini="true" id="submitnote" data-role="button">Submit</a>
    <a href="#" data-rel="back" id="cancelSubmitNote" data-mini="true" data-role="button">Cancel</a>
</div>

当用户点击提交时,我执行ajax响应以将文本发送到服务器,并且在成功时通过向用户显示隐藏的DIV作为确认来跟进它。我使用DIV而不是另一个弹出窗口,因为我意识到在我的ajax调用中不可能链接弹出窗口。

// this is called when the user hits submit in the popup
$("#submitnote").click(function (e) {
    e.preventDefault();

    // do stuff here to pass textstring

    $("#popupBasic").hide();
    $.ajax({
        type: 'POST',
        data: textstring,
        url: '/something/addnote',
        success: function (data) {
            showConfirm(data); // upon success call the function below to open the DIV
        }
    });
    $("#AttitionalNoteText").val("");
});

function showConfirm(data) {
    document.getElementById("confirmMsg").innerHTML = data;
    $("#confirmBox").show();
}

// this is to close that DIV
$("#closeConfirmBox").click(function (e) {
    $("#confirmBox").hide();
});

这是简单的DIV以及关闭按钮。

<div id="confirmBox">
    <div id="confirmMsg" style="padding: 10px; font-size: 16px;">
        this message gets replaced with whatever ajax call returned
    </div>
    <a href="#" id="closeConfirmBox" data-role="button">Close</a>
</div>

似乎在弹出窗口隐藏并且我的DIV出现后,鼠标不会显示为手指指针,直到我点击页面上的某个位置。只有这样才能正确使用DIV上的关闭按钮。在移动设备上也会发生同样的情况,我必须在屏幕上的某个地方标记,然后才能再次点击关闭。我该怎么办?

2 个答案:

答案 0 :(得分:0)

问题是你没有使用弹出窗口小部件的 close method ,你只是隐藏div并将模态屏幕留在原位。

更改;

$("#popupBasic").hide();

要:

$("#popupBasic").popup( "close" ); 
  

正在使用 DEMO

顺便说一句,如果您确实想要使用链式弹出窗口,请查看我写的这篇博文:http://jqmtricks.wordpress.com/2014/05/16/chained-popups-with-simpledialog2/

答案 1 :(得分:0)

$("#popupBasic").hide(); 
$("#popupBasic-screen").hide();

在ajax调用之前添加了上述内容。

我认为如果找到.popup(&#34; close&#34;)未正确定义的正确解决方案,这不会成为一个问题。