DIV中显示的“关闭”按钮在第一次单击（或点击）时不响应

Question

I have a problem where a revealed DIV does not close on the first attempt. The user has to click at least once, anywhere on the page - doesn't have to be the close button, before they can click CLOSE to actually close the DIV. First off though, there is a short lead up before the DIV.

I use a jquery mobile popup in my page to contain a single text field and submit button. It looks something like this (minus the layout). The user submits their note through this popup.

<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>

When the user hits submit, I perform an ajax response to send the text to the server and upon success follow it up by revealing a hidden DIV as confirmation to the user. I use a DIV instead of another popup since I realized that chaining popups is not possible within my ajax call.

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

Here's that simple DIV along with a close button.

<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>

It seems that after the popup hides and my DIV comes up, the mouse does not show as a finger pointer until I've click somewhere on the page once. Only then can I use the Close button on the DIV properly. The same happens on mobile, I have to tab somewhere on the screen before I can tap again on Close. What can I do about this?

Answer 1

The problem is that you are not using the popup widget's close method , you are just hiding the div and leaving the modal screen in place.

Change;

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

To:

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

Working DEMO

BTW, if you do want to go with chained popups, have a look at this blog entry I wrote: http://jqmtricks.wordpress.com/2014/05/16/chained-popups-with-simpledialog2/

Answer 2

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

Added the above just before the ajax call.

I think this wouldn't have been a problem if there was a proper solution to .popup("close") being undefined.