jQuery没有在IE10中触发

Question

$(document).ready(function () {
    $('#ctl00_ContentPlaceHolder1_btnDisplayReport').click(function () {
        if ((new Date($('#ctl00_ContentPlaceHolder1_txtStartDateFrom').val()) > new Date($('#ctl00_ContentPlaceHolder1_txtStartDateTo').val())) && $('#ctl00_ContentPlaceHolder1_txtStartDateTo').val() != "") {
            alert("Start date cannot be greater than end date.");
            return false;
        }

        if (new Date(($('#ctl00_ContentPlaceHolder1_txtCompletionDateFrom').val()) > new Date($('#ctl00_ContentPlaceHolder1_txtCompletionDateTo').val())) && $('#ctl00_ContentPlaceHolder1_txtCompletionDateTo').val() != "") {
            alert("Completion start date cannot be greater than completion end date.");
            return false;
        }
    });

    $('.dateverification>input').each(function () {
        $(this).change(function () {
            temp = $(this).attr("id");
            temp = temp.replace("txt", "lbl");
            if ($(this).val()) {
                $('#' + temp).show();
            }
        });

        $('.xlink').click(function () {
            temp1 = $(this).attr("id");
            temp1 = temp1.replace("lbl", "txt");
            $('#' + temp1).val("");
            temp1 = temp1.replace("txt", "lbl");
            $('#' + temp1).hide();
        });
    });
});

This is e jQuery function which works perfectly in FF and Chrome, but not firing in IE10, and the part that is not working starts from $('.dateverification>input').each(function()... I don't catch any javascript errors with dev tools or something I should be aware of. Basically, I am missing something and I can't get it work for all browsers. (Also did a no-cache request in my codefile)

<tr>
    <td style="width: 25%;">
        <%= this.GetGlobalResourceObject("CourseCompletionReport.aspx", "Reports.CourseCompletionReport.StartDateFrom") %>
    </td>
    <td class="dateverification" style="width: 75%;">
        <asp:TextBox ID="txtStartDateFrom" runat="server" SkinID="TextBoxNoneMandatory" autocomplete="off" contentEditable="false"></asp:TextBox>
        <ajaxToolkit:CalendarExtender ID="defaultCalendarExtender1" Format="MMMM dd, yyyy" runat="server" TargetControlID="txtStartDateFrom" />
        <asp:Label ID="lblStartDateFrom" runat="server" Text="x" class="xlink" ></asp:Label>
    </td>
</tr>

This is one of the parts - textbox + ajax calender + label, if there is something wrong with the structure of the html as well.. So if any of you guys have an idea what should I do to debug this, please respond. Thanks in advance.

Answer 1

I would assume any issues in IE 10 carried over into IE 11. I'm running IE 11 and based on the script and structure you've given, it seems to be working for me.

Here's a fiddle I used. I tried to replicate what you've shown, replacing a span element with your label since that is what would get rendered and removing the CalendarExtender , which I don't think would matter anyways.

http://jsfiddle.net/Sn7p8/9/

Are you sure that your selector is getting the elements you're expecting?

As a side note, here is an example of one common practice for storing jquery objects

var Members = 
{
  btnDisplayReport: $('#' + <%= btnDisplayReport.ClientID %>),
  txtStartDateFrom: $('#' + <%= txtStartDateFrom.ClientID %>),
  txtStartDateTo: $('#' + <%= txtStartDateTo.ClientID %>),
  txtCompletionDateFrom: $('#' + <%= txtCompletionDateFrom.ClientID %>)
}

Then, you can use the Members object to access the elements

$(document).ready(function(){
  Members.btnDisplayReport.click(function(){
    ...
  });
});