jquery - 对话框内的选项卡不会呈现

Question

我正在尝试初始化对话框中的选项卡，但它们不起作用。对话框 html 通过初始化附加。我正在取回原始 html。我尝试的代码如下所示。但是在带有断点的萤火虫中，代码可以工作

//HTML
<div id="tabs">
    <ul>
        <li><a href="#tab-1">Edit</a>
        </li>
        <li><a href="#tab-2">Send Email</a>
        </li>
    </ul>



    <div id="tab-1">

        <form action="#" method="post" id="edit_form"></form>
    </div>
    <div id="tab-2">
        <div id="contact-wrapper">
            <form method="post" action="mailer.php" id="contactform"></form>
        </div>

    </div>

</div>

和 Javascript

  // Init Dialog
        $('a.open_dialog').click(function() {
            $('#tabs').tabs();

            $('<div />').appendTo('body').load($(this).attr('href')).dialog({
                title: $(this).attr('title'),
                modal: true,
                draggable: false,
                width: 800,
                position: 'top',
                buttons: {
                    "Save": function() {
                        $.ajax({
                               type: "POST",
                               url: 'action.php',
                               data: $("#edit_form").serialize(), // serializes the form's elements.
                               success: function(data)
                               {
                                   alert(data); // show response from the php script.
                               }
                             });

                    },
                    "Send Email": function() {

                        $.ajax({
                               type: "POST",
                               url: 'mailer.php',
                               data: $("#contactform").serialize(), // serializes the form's elements.
                               success: function(data)
                               {
                                   alert(data); // show response from the php script.
                               }
                             });
                    }
                },
                close: function() {
                    location.reload(true);
                    allFields.val( "" ).removeClass( "ui-state-error" );


                }
            });

Answer 1

对话框打开后，您需要初始化选项卡。

$('<div />').dialog({
    open : function(){  //In case of autoOpen = true
      $('#tabs').tabs();
    }
});

.tabs()如果没有，您可以在之后依次调用.dialog()