jQuery - multiple instances of dialog boxes won't open

Question

I have the following problem: I use dialog boxes to show different pages/content inside of them, however when two different dialog boxes are opened it crashes and they cannot be opened again. Everything is fine as long as one box is opened, it can even be opened multiple times. When I open second dialog box neither of them can be reopened. I have already tried to "destroy" the dialog on closing (as suggested here Jquery Dialog opening multiple dialogs) but it didn't help, I still can open only one instance of each box and when two different ones are opened it crashes and neither of them reopens.

I have something like that in html:

<ul>
<li><a href="javascript:void(0)" id="link1">link1 title</a></li>
<li><a href="javascript:void(0)" id="link2">link2 title</a></li>
</ul> 

And then in the javascript:

$("#link1").click(function () {
$(function ()    {
        $('<div>').dialog({
            modal: false,
            open: function ()
            {
                $(this).load('somePage.php');
            },         
            height: 500,
            width: 1300,
            title: 'title1'
        });
    });
});
$("#link2").click(function() {
$(function ()    {
        $('<div>').dialog({
            modal: false,
            open: function ()
            {
                $(this).load('otherPage.html');
            },         
            height: 535,
            width: 880,
            title: 'title2'
        });
    });
});

Answer 1

Your $(function () { is not at the right place:

$(function ()    {
    $("#link1").click(function () {
        $('<div>').dialog({
            modal: false,
            open: function ()
            {
                $(this).load('somePage.php');
            },         
            height: 500,
            width: 1300,
            title: 'title1'
        });
    });
    $("#link2").click(function() {
        $('<div>').dialog({
            modal: false,
            open: function ()
            {
                $(this).load('otherPage.html');
            },         
            height: 535,
            width: 880,
            title: 'title2'
        });
    });
});

The code inside $(function() {…} is executed at document loading, the perfect time to register event handler on our HTML elements.