Question

我通过Ajax使用带有conten的jquery ui标签。在content1.html中有一个对话框和一个按钮。当我选择“Ajax tab1”时，单击“打开”按钮打开dlg_set_awd dialog，关闭此对话框，选择另一个选项卡，然后再选择“Ajax tab1”，单击“打开”按钮，打开两个对话框相同的ID。当我选择另一个标签时，如何清除对话框？

我的代码如下：

标签文件：

</script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    </script>

HTML：

<div class="demo">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
            <li><a href="ajax/content2.html">Ajax Tab 2</a></li>
        </ul>
        <div id="tabs-1">
            <p>ABC</p>
        </div>
    </div>
</div><!-- End demo -->

content1.html

    <script type="text/javascript">
        $(document).ready(function(){
            $('#dlg_set_awd').dialog({
                autoOpen: false,
                height: 100,
                width: 400,
                modal: true,
                buttons: {
                    'Save': function () {

                    },
                    Cancel: function () {
                        $('#dlg_set_awd').dialog('close');
                    }
                },
                close: function () {
                }
            });

            $('#open').click(function(){
                $('#dlg_set_awd').dialog('open');   
            });
        });
    </script>

HTML：

<form id="form1">
<table id='dlg_set_awd' title="Set ward for participant">
    <tr>
        <td  width="400px" style=" vertical-align:top;">
            <div style="float:left; width:90px; padding-right:11px;">
                <div style="width:90px;" class="id1">First name</div>
                <input type='text' id="first_name" style="width:90px" class="ui-widget-content" />
            </div>
            <div style="width:90px; float:left; padding-right:11px;">
                <div style="width:90px;" class="id1">Last name</div>
                <input type='text' id="last_name" style="width:90px" class="ui-widget-content" />
            </div>
        </td>
    </tr>
</table>
<button id='open' type="button">Open dialog</button>
</form>

Answer 1

使用此代码绑定click事件：

    $('#open').unbind('click.myNameSpace').bind("click.myNameSpace", function() {
        if($('#dlg_set_awd').dialog('isOpen')!='true')
        {
            $('#dlg_set_awd').dialog('open');
        }
    });

如何在jQuery UI选项卡中清除对话框

1 个答案: