Javascript在asp.net updatepanel中的内容上未正确运行_Javascript_Jquery_Asp.net_Updatepanel_Jquery Ui Datepicker

Javascript在asp.net updatepanel中的内容上未正确运行

javascript jquery asp.net

Javascript在asp.net updatepanel中的内容上未正确运行,javascript,jquery,asp.net,updatepanel,jquery-ui-datepicker,Javascript,Jquery,Asp.net,Updatepanel,Jquery Ui Datepicker,我有一个函数，当用户将鼠标悬停在jquery日期选择器上的某些日期上时，它会向这些日期添加custon工具提示。这在一个普通的html页面上运行良好，但我需要使它在一个带有updatepanel的.net页面上运行这是我的代码，它可以工作 <input class='propertyAvailabilityCal' /> <select name="startDates" id="startDates" class="startdates"> <opt

我有一个函数，当用户将鼠标悬停在jquery日期选择器上的某些日期上时，它会向这些日期添加custon工具提示。这在一个普通的html页面上运行良好，但我需要使它在一个带有updatepanel的.net页面上运行

这是我的代码，它可以工作

<input class='propertyAvailabilityCal' />

<select name="startDates"  id="startDates" class="startdates">
    <option selected="selected" value="%">%</option>
    <option value="2013, 11, 01">C1</option>
    <option value="2013, 11, 08">C1</option>
    <option value="2013, 11, 11">C1</option>
    <option value="2013, 11, 18">C1</option>
    <option value="2013, 11, 29">C1</option>

</select>

我将日期选择器代码包装在

函数pageLoad（）{…}

我已经尽可能地简化了这一点，但我担心这可能仍然没有意义。任何帮助都将不胜感激

编辑

好吧，我想我有办法解决这个问题。。。它似乎运行了两次mouseover事件，一次在现有的隐藏日期选择器上运行，另一次在显示日期选择器时运行。因此，在第二次运行时，类已经被删除，因此它会显示工具提示

知道为什么会发生这种情况吗？

在

pageLoad

事件中编写代码，而不是在DOM就绪事件中编写代码：

function pageLoad(sender,args){
    // Code that should get executed again after partial postback
}

很抱歉应该提到我做了那件事。。。我现在编辑问题你们在控制台上有什么错误吗？没有。。。问题是，当日期选择器打开而不需要悬停时，第一个日期上的工具提示会出现。当您悬停在其他日期上时，是否会收到工具提示？之后第一个工具提示会消失吗？是的，除了第一个工具提示出现而不需要悬停（因为它被设置为默认日期）之外，它工作正常。但是如果它不在updatepanel中，删除该类可以防止这种情况发生。不过，在这种情况下不会阻止它。如果它本身没有发生，则可能是脚本冲突，您可以使用此链接来解决

    <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="UTF-8" %>
<script runat="server">


Sub CheckAvailability(ByVal Sender as Object, ByVal E as EventArgs)
    mydate.Visible = True
    mybutton.Visible = False
End Sub

</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type="text/javascript" src="http://www.tomandjayne.co.uk/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://www.tomandjayne.co.uk/Scripts/jquery-ui-1.8.22.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style type='text/css'></style>
<script type='text/javascript'>

//DATE DIFFERENCE FUNCTION FOR PROPERTY LEVEL DATEPICKER FIRST DATE
var firstStartDate;
function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}

function pageLoad() {

$('.propertyAvailabilityCal').datepicker({

        firstDay: 1,
        minDate: 0,
        maxDate: '+2Y',
        numberOfMonths: 1,

        beforeShow: function(input, inst) {
            startDates = [];            
            selectdatesElem = $(input).siblings("select.startdates");   
            firstStartDate = selectdatesElem.find("option:eq(1)").val().split(', ');
            $(input).datepicker('option','defaultDate',dateDiffInDays(new Date(), new Date(parseInt(firstStartDate[1], 10) + "/" + parseInt(firstStartDate[2], 10) + "/" + parseInt(firstStartDate[0], 10))));

            $(input).siblings("select.startdates").find("option").each( function() {
                  startdateParts = $(this).val().split(', ');
                  startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
            }); 

        },

        beforeShowDay: function(date) {         
            for (i = 0; i < startDates.length; i++) {
                  if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
                        return [true, 'eventDay',"someText"];
                  }
            }           
            return [false, ''];
        }
    });

    $(document).on("mouseover", "td.eventDay", function() {
        if($(this).hasClass("ui-datepicker-days-cell-over")){
            //alert("do nothing");
            $(this).removeClass('ui-datepicker-days-cell-over').find("a").removeClass('ui-state-hover');
            //$(this).find("span.detailsPopup").remove();
        }
        else{
            $(this).data("title", { popit: $(this).attr("title") }).removeAttr("title").css("position","relative");
            if($(this).data("title").popit) {
                $(this).append("<span class='detailsPopup' style='position:absolute; z-index:5;'>"+$(this).data("title").popit+"</span>");
            }
        }
    });

    $(document).on("mouseleave", "td.eventDay", function() {
        $(this).data("title", { popit: $(this).find(".detailsPopup").html() });
        $(this).attr("title", $(this).data("title").popit);
        $(this).find(".detailsPopup").remove();
    }); 

}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanelMaster" ChildrenAsTriggers="true">
  <ContentTemplate>


<select class="startdates">
  <option selected="selected" value="%">%</option>
  <option value="2013, 12, 28">1</option>
  <option value="2014, 11, 15">1</option>
  <option value="2014, 11, 22">1</option>
  <option value="2014, 12, 13">1</option>
  <option value="2014, 12, 20">1</option>
  <option value="2014, 12, 27">1</option>
  <option value="2015, 01, 03">1</option>
  <option value="2015, 01, 10">1</option>
  <option value="2015, 01, 17">1</option>
  <option value="2015, 01, 24">1</option>
  <option value="2015, 01, 31">1</option>
  <option value="2015, 02, 07">1</option>
  <option value="2015, 02, 14">1</option>
  <option value="2015, 02, 21">1</option>
  <option value="2015, 02, 28">1</option>
  <option value="2015, 03, 14">1</option>
  <option value="2015, 03, 21">1</option>
  <option value="2015, 03, 28">1</option>
  <option value="2015, 04, 04">1</option>
  <option value="2015, 07, 04">1</option>
</select>

<asp:Textbox CssClass="propertyAvailabilityCal" runat="server" ID="mydate" Visible="false" />
<asp:Button runat="server" ID="mybutton" OnClick="CheckAvailability" Text="CHECK AVAILABILITY" CausesValidation="false" />

  </ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

function pageLoad(sender,args){
    // Code that should get executed again after partial postback
}