Question

In a jQuery Mobile project, have a dialog box (not a popup) with some fields and two buttons styled like so:

        <a data-role="button" data-inline="true" data-transition="none" href="#"
            data-icon="check" data-iconpos="left" id="saveEdit">Save
        </a>
        <a data-role="button" data-inline="true" data-transition="none" href="#"
            data-icon="delete" data-iconpos="left" id="closeEdit">Cancel
        </a>

When one of them is clicked, a click event handler closes the dialog:

$(document).on("vclick", "#saveEdit", function () {

    LoginCookie(EditDoc, "Y");
    $('.ui-dialog').dialog('close');
});

However, when this happens, a click event is also fired on anything that was “behind” the dialog, almost as if you are tapping “through” the dialog button, even though it still fires a click event on the button. Is there a way to prevent this behavior?

Answer 1

This appears to have fixed it:

 $(document).on("vclick", "#saveEdit", function (e) {


            e.preventDefault();


            LoginCookie(EditDoc, "Y");
            $('.ui-dialog').dialog('close');
        });