Problem with multiple jQuery UI dialogs and hyperlinks

Question

I'm having a problem similar to the one here: Prior jQuery UI Dialogs become nonresponsive....

Here's how the problem happens: If I open one dialog and then a second dialog, and then close the second dialog, hyperlinks in the first dialog no longer work.

Here is the code for the dialogs:

<script type="text/javascript">
    $(function()
    {
        $("#PropertyDialog").dialog({
            autoOpen: false,
            modal: true,
            position: ['center',100],
            resizable: false,
            height: 'auto',
            width: 700
        });
    });
    function ShowPropertyDetailsDialog(strPropertyId)
    {
        // set the html of the div
        LoadPropertyDialogHtml(strPropertyId);

        // open the dialog
        $('#PropertyDialog').dialog('open');
    }
</script>

<div id="PropertyDialog" title="Property Details">
</div>

<script type="text/javascript">
    $(function()
    {
        $("#PropertyImageDialog").dialog({
            autoOpen: false,
            modal: true,
            position: ['center',75],
            resizable: false,
            height: 'auto',
            width: 650
        });
    });

    function ShowImageDialog(strTitle, strLinkUrl)
    {
        var dialogDiv = $get("PropertyImageDialog");
        dialogDiv.innerHTML = "<img src='" + strLinkUrl + "' alt='' width='600' />";

        $("#PropertyImageDialog").dialog"option","title",strTitle);

        // open the dialog
        $('#PropertyImageDialog').dialog('open');
    }
</script>

<div id="PropertyImageDialog" title="Property Image">
</div>

The LoadPropertyDialogHtml function does something similar to the first two lines of the ShowImageDialog - setting the content of the PropertyDialog div.

I can replace some of the link functionality by using window.location for normal links and window.open for new window links, but I'd like to get the hyperlinks to work (and I'd like to understand why this is happening).

Answer 1

Could you do a quick check to see if there are any other DIVS on top of this dialogue? That could actually be an issue. In chrome, just right click > "inspect" over the problem div, and it comes up highlighting an overlay / something that isn't your dialogue div, then that is the problem.