Question

我有一个HTML页面，其中我执行2个不同的JavaScripts。

一个用于自动填充文本框，另一个用于将鼠标悬停在Gridview上。

我最近添加了悬停脚本并且自动完成停止了工作，我确定我做错了什么！

 <%@ Page Language="C#" AutoEventWireup="true" Inherits="SearchER" CodeBehind="Search.aspx.cs" %>

<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    #form1 {
        height: 645px;
    }

    .form-control {
    }

    td {
        cursor: pointer;
    }

    .hover_row {
        background-color: #FFFFBF;
    }
</style>

<form id="form1" runat="server" style="background-color: #FFFFFF; font-family: tahoma; margin-left: 0px; margin-top: 0px;">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

    <div style="background-color: white; height: 46px;">

        <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Tahoma" Font-Size="X-Large" NavigateUrl="~/Default.aspx">Πίσω στο Εξοδολόγιο</asp:HyperLink>

    </div>
    <div style="margin-left: AUTO; margin-top: 100px; margin-bottom: 12px; font-family: tahoma; font-size: x-large; width: 627px; height: 63px; margin-right: auto;" align="center">

        <script type="text/javascript">

            $(document).ready(function () {
                $("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx" ) %>' });
            });

        </script>
        &nbsp;<asp:Label ID="Label1" runat="server" Text="Find a name:"></asp:Label>
        <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" autocomplete="ON"
            Width="296px" OnTextChanged="txtSearch_TextChanged" BorderStyle="Solid" BorderColor="#507CD1" Height="22px" />
        <asp:Button ID="Button1" Text="Find" runat="server" OnClick="Submit" BorderStyle="Solid" Height="26px" Style="margin-top: 0px; margin-left: 0px;" Width="96px" BorderColor="#507CD1" />
        &nbsp;
    </div>

    <div style="height: 412px; width: auto; margin-top: 0px; margin-left: auto; margin-right: auto;" align="center">

        <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound" OnSelectedIndexChanged="OnSelectedIndexChanged" Height="150px" Style="word-break: keep-all; word-wrap: normal; margin-left: auto; margin-right: auto; width: auto; margin-top: 0px;" AllowSorting="True" CellSpacing="3">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="TripID" HeaderText="id" />
                <asp:BoundField DataField="EmployeeName" HeaderText="Όνομα" />
                <asp:BoundField DataField="FromDate" HeaderText="Ημερομηνία-(από)" />
                <asp:BoundField DataField="ToDate" HeaderText="Ημερομηνία-(μέχρι)" />
            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" Font-Names="Tahoma" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
        </asp:GridView>
        <asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton>

    </div>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">

            $(function () {

                $("[id*=GridView1] td").hover(function () {
                    $("td", $(this).closest("tr")).addClass("hover_row");
                }, function () {
                    $("td", $(this).closest("tr")).removeClass("hover_row");
                });
            });

        </script>
</form>

在此代码中GridView悬停工作，自动完成不会！

Answer 1

您正在引用JQuery两次，删除底部的一个：

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

另外我建议将自动完成代码移到底部，这样你就有了一种加载方法 - 记住$(function() {是$( document ).ready()的简写，所以声明它一次更清洁/更好（{ {3}}）：

    <script type="text/javascript">

        $(function () {

             $("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx" ) %>' });

            $("[id*=GridView1] td").hover(function () {
                $("td", $(this).closest("tr")).addClass("hover_row");
            }, function () {
                $("td", $(this).closest("tr")).removeClass("hover_row");
            });
        });

    </script>

ASP.NET javascript阻止其他脚本

1 个答案: