firefox - Firefox を閉じて再度開いた後、JQuery UI ダイアログのポップアップをクリックできない

Question

私が取り組んでいる Web サイトには、ユーザー コントロールをロードするポップアップがあります。3 つのテキスト ボックスと 1 つのボタンがあります。ダイアログボックスを初めて開いたときは、問題なく動作します。ただし、ユーザーがそれを閉じて再度開くと、クリックできなくなります。ダイアログが表示されますが、その中はクリックできません。

このダイアログ ボックスは、IE、Chrome、および Safari では、閉じて再度開いたときに問題なく機能しますが、Firefox では、2 回目に開いたときに何もできません。

これは、それを開く私のJavaScriptコードです。

    var $dialogRSVPShortForm;

if( ($dialogRSVPShortForm == null)  ||  ($dialogRSVPShortForm == undefined) || ($dialogRSVPShortForm == "undefined") ) {
    $dialogRSVPShortForm = $j("<div id='rsvpShortFormDlgDivId'></div>")
        .load('/controls/RSVPForm/RSVPShortForm.aspx' + strQS + ' #content')
        .dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            resizable: false,
            width: 430,
            dialogClass: 'popUpContainer',
            title: $link.attr('title'),
            open: function () {
                jQuery('.ui-widget-overlay').bind('click', function () {
                    jQuery($dialogRSVPShortForm).dialog('close');
                })
            }
        });
    }
    else {
        $j("#rsvpShortFormDlgDivId").load('/controls/RSVPForm/RSVPShortForm.aspx' + strQS + ' #content');
 }
    $dialogRSVPShortForm.dialog('open');
     }

簡単に言うと、$dialogRSVPShortForm には、ユーザーがダイアログ ボックスを初めて開いたときに、ダイアログ ボックスの新しいインスタンスが割り当てられます。その後はいつでも、else 部分に移動して再度開くだけで、ダイアログの新しいインスタンスを作成するのではなく、コントロールを再読み込みします。毎回インスタンスを作成すると、過去に多くの問題が発生しましたが、そのような作業に戻りたくありません。

次に、ダイアログ ボックスに読み込まれるコントロールを示します。

    <h2>R.S.V.P. For Event</h2>
<table class="rsvpShortForm">
    <tr>
        <td class="label">
            <div class="required">*</div><label for="<%=txtEmail.clientID%>">Email</label>
        </td>
        <td class="field">
            <asp:TextBox ID="txtEmail" runat="server" TextMode="SingleLine" Width="230px"
            onFocus = "if (this.value == 'Email ex: my@email.com') {this.value = ''; this.style.color = '#000';}"
            onBlur = "if (this.value == '') {this.value = 'Email ex: my@email.com'; this.style.color = '#CCC';}"
            value = "Email ex: my@email.com" CssClass = "ghostText" TabIndex="1"/>
             <span class="errorMsg" id="errEmail" style="display: none">Email is required.</span>
            <span class="errorMsg" id="errLegitEmail" style="display: none">Email needs to be valid.</span>
        </td>
    </tr>
    <tr>
        <td class="label">
            <div class="required">*</div><label for="<%=txtPhone.clientID%>">Phone</label>
        </td>
        <td class="field">
            <asp:TextBox ID="txtPhone" runat="server" TextMode="SingleLine" Width="230px" onFocus="if (this.value == 'Phone Number (XXX)-XXX-XXXX') {this.value = ''; this.style.color = '#000';}"
            onBlur="if (this.value == '') {this.value = 'Phone Number (XXX)-XXX-XXXX'; this.style.color = '#CCC';}"
            value="Phone Number (XXX)-XXX-XXXX" CssClass="ghostText" TabIndex="2"/>
            <span class="errorMsg" id="errPhone" style="display: none">Phone is required.</span>
            <span class="errorMsg" id="errValidPhone" style="display:none">Valid phone number required.
            </span>
        </td>
    </tr>
    <tr>
        <td class="label">
            <label for="<%=txtCompany.clientID%>">Company</label>
        </td>
        <td class="field">
            <asp:TextBox ID="txtCompany" runat="server" TextMode="SingleLine" Width="230px" onFocus="if (this.value == 'Your Company') {this.value = ''; this.style.color = '#000';}"
            onBlur="if (this.value == '') {this.value = 'Your Company'; this.style.color = '#CCC';}"
            value="Your Company" CssClass="ghostText" TabIndex="3"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="clearbutton"><input type="button" class="globalBTN" ID="btnSubmit" /></div>
     </td>
    </tr>
</table>

私が得ることができる助けに感謝します。