jquery ui 工具提示对于 ajax 更新面板下的控件仍然可见

Question

![问题快照][2]我有一个网络表单，在下面的代码中使用两个更新面板:

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <div id="SpeciesWrapper" class="RowControl" runat="server">
                        <div class="QuestionColumnControl">
                            <asp:Label ID="lblspecies" runat="server">[$BRAND(LABEL,STAGE1.SPECIES)$]</asp:Label>
                        </div>
                        <div class="AnswerColumnControl" title="Please let us know the type of pet you want to insure.">
                            <asp:RadioButtonList ID="radbtnspecies" runat="server" AutoPostBack="True" OnSelectedIndexChanged="speciesChanged"
                                RepeatDirection="Horizontal" >
                                <asp:ListItem Text="Cat" />
                                <asp:ListItem Text="Dog" />
                            </asp:RadioButtonList>
                            <label for="radbtnspecies" class="error">
                                Please select your gender</label>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Select your Species Type"
                                ControlToValidate="radbtnspecies" EnableClientScript="False"></asp:RequiredFieldValidator>


                        </div>
                    </div>
                    <div id="PetBreedWrapper" class="RowControl" runat="server">
                        <div class="QuestionColumnControl">
                            <asp:Label ID="lblPetBreed" runat="server" AssociatedControlID="ddlPetBreed">[$BRAND(LABEL,STAGE1.PETBREED)$]</asp:Label>
                        </div>
                        <div class="AnswerColumnControl">
                            <asp:DropDownList ID="ddlPetBreed" runat="server" ToolTip="If you can’t find the right breed, please call us as we may still be able to insure your pet." />
                            <span class="errormsg">
                                <cc1:BDML_HighlighterValidator ID="valPetBreed" runat="server" ControlToValidate="ddlPetBreed"
                                    DivID="PetBreedWrapper" DivCSS="RowControl" ErrorClass="RowControlErr" ForeColor=""
                                    ValidateEmptyText="True" ErrorMessage="[$BRAND(ERROR,STAGE1.PETBREED.REQ)$]"
                                    Display="Dynamic" OnServerValidate="required_ServerValidate" SetFocusOnError="true"> </cc1:BDML_HighlighterValidator>
                            </span>
                        </div>
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="radbtnspecies" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>

使用更新面板的另一 block 表单在这里:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="ChippedWrapper" class="RowControl" runat="server">
                        <div class="QuestionColumnControl">
                            <asp:Label ID="lblChipped" runat="server" AssociatedControlID="radChippedYes">[$BRAND(LABEL,STAGE1.CHIPPED)$]</asp:Label>
                        </div>
                        <div class="AnswerColumnControl" title="Has your pet been identified with a chip or tag?">
                            <asp:RadioButton ID="radChippedYes" Checked="true" runat="server" GroupName="radChipped"
                                AutoPostBack="True" OnCheckedChanged="radChippedYes_CheckedChanged" />
                            <asp:Label ID="lblChippedYes" runat="server" AssociatedControlID="radChippedYes">[$BRAND(LABEL,STAGE1.CHIPPEDYES)$]</asp:Label>
                            <asp:RadioButton ID="radChippedNo" runat="server" GroupName="radChipped" AutoPostBack="True"
                                OnCheckedChanged="radChippedNo_CheckedChanged" />
                            <asp:Label ID="lblChippedNo" runat="server" AssociatedControlID="radChippedNo">[$BRAND(LABEL,STAGE1.CHIPPEDNO)$]</asp:Label>
                            <%--<img alt="Help" class="help" src="[$BRAND(IMAGELINK,HELP)$]" onmouseover="javascript:showhelpdiv('help-chipped')"
                                onmouseout="javascript:hidehelpdiv('help-chipped')" onmousemove="javascript:movehelpdiv(event,'help-chipped')" />--%>
                        </div>
                    </div>
                    <div id="ChipNoWrapper" class="RowControl" runat="server">
                        <div class="QuestionColumnControl">
                            <asp:Label ID="lblChipNo" runat="server" AssociatedControlID="txtChipNo">[$BRAND(LABEL,STAGE1.CHIPNO)$]</asp:Label>
                        </div>
                        <div class="AnswerColumnControl">
                            <asp:TextBox ID="txtChipNo" runat="server" MaxLength="15" />
                            <%--<img alt="Help" class="help" src="[$BRAND(IMAGELINK,HELP)$]" onmouseover="javascript:showhelpdiv('help-chipno')"
                                onmouseout="javascript:hidehelpdiv('help-chipno')" onmousemove="javascript:movehelpdiv(event,'help-chipno')" />--%>
                            <span class="errormsg">

                            </span>
                        </div>
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="radChippedYes" EventName="CheckedChanged" />
                </Triggers>
            </asp:UpdatePanel>

我正在使用外部脚本文件并在页面上引用它。表单在页面加载时使用 jquery ui 工具提示小部件，代码如下:

if ($('body').prop('id') == "youandyourpet") {

$(function () {


    //code to initialize tooltip
    $(document).tooltip();
 });

function pageLoad(sender, args) {

        //code to initialize tooltip
        $(document).tooltip();      
}}

这里我使用jquery Ready函数以及pageLoad函数，这样当更新面板的部分渲染发生时，它再次将控件与工具提示联系起来。但我在 IE7、8 和最新的 chrome 版本中检查过，如果选择控制面板中的上述任何单选按钮，工具提示仍然可见。

![显示表单问题的图片][3]

Answer 1

我在很多论坛上搜索了很多。另外，我做得正确，但最终我有一个非常肮脏的方法来解决我的问题。

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(函数()
{ $(".ui-tooltip-content").parents('div').remove();
});

如果有人知道，请提供任何其他解决方案。干杯。