Question

我正在使用大量使用jquery的mvc项目。在其中一个视图中，我们手风琴控制内部有多个（三个）视图。 jquery弹出窗口在第一个面板中工作正常，但是一旦我关闭该面板，弹出窗口就不想再次工作了。虽然我使用http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/和http://jsfiddle.net/DSNt5作为指南，但我不知道会发生什么。请在下面找到代码。标记：

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

我有两个样本的按钮，他们两个都在做同样的事情。我们将非常感谢您的建议。在此先感谢Laziale

更新：

<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

您应该只初始化一次对话框。您每次点击都会重新初始化它。

在文档准备就绪时初始化它，然后在你的点击处理程序中调用

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

编辑：

您仍然在openDialog函数中进行了对话框初始化。试试这个：

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

jquery ui popup不会再工作一次

1 个答案: