Question

我有以下jquery代码来弹出一个对话框。它第一次工作正常。但是，当对话框关闭，我再次打开它时，对话框文本区域为空（没有显示文本），只有三个按钮。现在，如果我再次重新打开它（第3次，第4次......），一切正常（文字显示）。从名称可以看出，通过单击按钮触发弹出对话框的函数buttonClicked（）。所以任何人都有任何线索？

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        function buttonClicked() {
           var dialog = $( "#dialog" ).dialog({
                modal: true,
                autoOpen: false,
                buttons: {
                    "Cancel":  function() {
                        $(this).closest('.ui-dialog-content').dialog('close');
                    },
                    "Button2": function() {
                        // do something
                        $(this).closest('.ui-dialog-content').dialog('close');
                    },
                    "Button1":  function() {
                        ... // do something
                        $(this).closest('.ui-dialog-content').dialog('close');
                    }
                }
            });

            dialog .dialog( "open" ); 
        }


          <div id = "dialog" name="dialog" style="display:none; ">
          <style>
            .ui-dialog-titlebar-close .ui-icon-closethick {
              position: relative !important;
              margin-top: -9px  !important;
              margin-left: -16px  !important;
            }
          </style>
          <p>I am the text shown in the dialog!!</p></div>

Answer 1

$( function() {
       $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                "Cancel":  function() {
                    $(this).closest('.ui-dialog-content').dialog('close');
                },
                "Button2": function() {
                    // do something
                    $(this).closest('.ui-dialog-content').dialog('close');
                },
                "Button1":  function() {
                    ... // do something
                    $(this).closest('.ui-dialog-content').dialog('close');
                }
            }
        });
      $('#yourBtn').click(function(){
          $("#dialog").dialog('open');
      }) 

    }

jquery对话框文本仅在第二次打开时消失

1 个答案: