脚本在更新面板中无法正常工作答案

【问题标题】：Script does not work correctly inside updatepanel脚本在更新面板中无法正常工作
【发布时间】：2012-06-03 15:32:13
【问题描述】：

我有一个显示工具提示的脚本

 function BindToolTip(){
        $('.toolTip').hover(
    function () {
        this.tip = this.title;
        $(this).append(
        '<div class="toolTipWrapper">'
            + '<div class="toolTipTop"></div>'
            + '<div class="toolTipMid">'
                + this.tip
            + '</div>'
            + '<div class="toolTipBtm"></div>'
        + '</div>'
    );
        this.title = '';
        this.width = $(this).width();
        $(this).find('.toolTipWrapper').css({ left: this.width - 22 })
        $('.toolTipWrapper').fadeIn(300);

    },
function () {
    $('.toolTipWrapper').fadeOut(100);
    $(this).children().remove();
    this.title = this.tip;
}
);
    }

aspx 文件的样子：

<asp:UpdatePanel ID="UpdatePanelAddNews" UpdateMode="Conditional" runat="server">  
<ContentTemplate>
 <script type="text/javascript">
             Sys.Application.add_load(BindToolTip);
  </script>    
   <div class="toolTip" title="This is a simple tooltip made with jQuery"></div> 
  <asp:UpdatePanel ID="UpdatePanelDate" runat="server">
      <ContentTemplate>                          
 <asp:DropDownList ID="DropDownListYearStart" runat="server" AutoPostBack="true"
  OnSelectedIndexChanged="OnSelectedStartDateChanged" CssClass="dropdown"> </asp:DropDownList>
     </ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>

当我悬停 div 时，它会正确显示工具提示，但是在使用下拉列表进行回发后，当我第一次悬停 div 时，它会显示两个工具提示，一个是空的，另一个工具提示在第一个后面带有文本。当我第二次悬停时，它只显示空的工具提示。我知道如果我删除行：this.title = '';从脚本它可以正常工作，但它会显示两个工具提示，我的自定义一个和默认的 Windows 工具提示。如何解决？

【问题讨论】：

你在哪里打电话给BindToolTip()？
我编辑了 aspx，我使用 Sys.Application.add_load(BindToolTip);在外部更新面板中
您是否尝试连接 BindToolTip 以在每次有部分回发时执行？

标签： asp.net updatepanel tooltip

【解决方案1】：

在 ContentTemplate 的最后编写您的脚本。喜欢，

<asp:UpdatePanel ID="UpdatePanelAddNews" UpdateMode="Conditional" runat="server">  
<ContentTemplate>    
<div class="toolTip" title="This is a simple tooltip made with jQuery"></div> 
<asp:UpdatePanel ID="UpdatePanelDate" runat="server">
  <ContentTemplate>                          
<asp:DropDownList ID="DropDownListYearStart" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="OnSelectedStartDateChanged" CssClass="dropdown"> </asp:DropDownList>
<script type="text/javascript">
         Sys.Application.add_load(BindToolTip);
</script>    
 </ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>

希望对您有所帮助。如果它解决了您的问题，请不要忘记支持它。谢谢.. :)

【讨论】：