jquery ui popup doesn't work more then once

Question

I am working on mvc project where jquery is heavily used. In one of the views there us accordion control with multiple (three) views inside. The jquery popup works fine in the first panel, but once I close that panel, the popup doesn't want to work again. I have no idea what can be, although I used http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ and http://jsfiddle.net/DSNt5 as guides. Please find the code below. Markup:

<div>
        @Html.Hidden("Id", Model.Report.Id)
        <div id="accordion">

            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="editor-label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="editor-field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>                           
                    </div>

                    <div class="removed" style="clear:both; float:left; margin-left:440px;">  
                     <a href="#" class="remove">Remove selection</a>
                     <button id="opener">Open Dialog</button>
                     <h2 class="demoHeaders">Dialog</h2>
        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
                    </div>              
                </div>
            }         
        </div>
        <p style="text-align: right">
            <input type="submit" value="Generate Report" />
        </p>
    </div>

JS:

    <script type="text/javascript">
        $(document).ready(function () {
            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    autoOpen: false,
                    title: 'Basic Dialog'
                });

            $('#opener').click(function () {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        });
            </script>


<script type="text/javascript">
$(function() {
    $( "#dialog2" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });
  $('#opener').click(openDialog);

})

var openDialog = function(){


   $('#dialog2').dialog('option', 'buttons',{
      "Cancel":function(){
         $('#dialog2').dialog('close');
      }
  });


 $('#dialog2').dialog('open');
</script>

I have the buttons from both samples there, and both of them are doing the same thing. Every advice will be greatly appreciated. Thanks in advance, Laziale

UPDATE:

<script type="text/javascript">
    $(document).ready(function () {

        {
            $("#dialog2").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
            });
            $('#opener').click(openDialog);

        }
    });
        </script>

<script type="text/javascript">

var openDialog = function(){

$('#dialog2').dialog('open');

   $('#dialog2').dialog('option', 'buttons',{
      "Cancel":function(){
         $('#dialog2').dialog('close');
      }
  });


 $('#dialog2').dialog('open');
</script>

Answer 1

You should only initialize your dialog once. You are reinitializing it every time you click.

Initialize it on document ready and then in your click handler just call

$('#dialog2').dialog('open');

EDIT:

You still have dialog initialization happening in your openDialog function. Try this:

<script type="text/javascript">
$(document).ready(function () {

    {
        $("#dialog2").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            buttons: {"Cancel": function(){
                $('#dialog2').dialog('close');
            }
        });

        $('#opener').click(function(){
             $('#dialog2').dialog('open');
        });

    }
});
</script>