script ne fonctionne pas correctement dans l'updatepanel

Question

J'ai un script pour afficher des infobulles.

 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 ressemblent :

<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>

Lorsque je survole la div, l'info-bulle s'affiche correctement, mais après avoir effectué un postback avec une liste déroulante, lorsque je survole la div pour la première fois, elle affiche deux info-bulles, l'une est vide et l'autre contient du texte derrière la première. Lorsque je survole le div la deuxième fois, il n'affiche que l'infobulle vide. Je sais que si j'enlève la ligne : this.title = '' ; de script cela fonctionnera bien, mais il va afficher deux infobulles, ma personnalisée, et l'infobulle par défaut de Windows. Comment résoudre ce problème ?

Answer 1

Ecrivez votre script à la fin du ContentTemplate. Comme,

<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>

J'espère que cela vous aidera. N'oubliez pas de l'upvoter s'il résout votre problème. Merci :)