Question

在我的网页中，我有两个绑定到jquery的控件。一个是将文本框值复制到剪贴板的按钮，另一个是用于输入日期的文本框。

enter image description here

但问题是当我调试这个Web应用程序时，它会抛出jquery错误。当我注释掉一个javascript方法并进行调试时，它可以工作（尝试使用两种javascript方法）。

但是当我不评论时，它不起作用。

enter image description here

Aspx代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchSerialResult.aspx.cs" Inherits="Locker.searchSerialResult" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">

        .auto-style3 {
            color: #CC3300;
            font-size: x-large;
        }
        .auto-style1 {
            color: #FFFFFF;
            font-size: large;
        }
        .auto-style2 {
            color: #000000;
        }
        </style>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">


    <p>
        &nbsp;<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong> <span class="auto-style3">&nbsp; Recorded Information</span><span class="auto-style1">&nbsp;&nbsp;&nbsp;</span></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <div style="width:70%; margin: auto auto; text-align:left; ">
         <asp:Panel ID="Panel1" runat="server" BorderStyle="None">
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<asp:Label ID="Label4" runat="server" CssClass="auto-style2" style="font-weight: 700; font-size: large" Text="Details for :"></asp:Label>
             &nbsp;<asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label>
             <br />
             <br />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<asp:Label ID="Label1" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial :"></asp:Label>
             &nbsp;<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid"  Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox>
            &nbsp;<asp:Button ID="Button3" runat="server" Text="Copy Me!"/>

                    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
                    <script src="Scripts/jquery.zclip.js" type="text/javascript"></script>
                    <script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script> 
                    <script>

                        $(document).ready(function () {
                            $('#<%=Button3.ClientID%>').zclip({
                                path: 'ZeroClipboard.swf',
                                copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
                        });
                        });
                 </script>
             <br />
             <br />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Label ID="Label13" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial Type :"></asp:Label>
             &nbsp;<asp:DropDownList ID="DropDownList1" runat="server" Height="26px" Width="181px" AutoPostBack="True" Enabled="False" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                 <asp:ListItem>Never Expire</asp:ListItem>
                 <asp:ListItem>Expire</asp:ListItem>
             </asp:DropDownList>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Label ID="Label14" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Expiry Date :" Visible="False"></asp:Label>
             &nbsp;<asp:TextBox ID="TextBox6" runat="server" BorderStyle="Solid" Enabled="False" Height="16px" Visible="False" Width="136px"></asp:TextBox>
             &nbsp;&nbsp;

             <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
             <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
             <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
             <link rel="stylesheet" href="/resources/demos/style.css" />
             <script>
                $(function () {
                $("#<%=TextBox6.ClientID%>").datepicker({

                });
            });
        </script>&nbsp;<br />
             <br />
             &nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label>
            &nbsp;<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="217px" Enabled="False"></asp:TextBox>
             <br />
             <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label>
             <asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label>
             <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" />
             <br />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <br />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label>
             <br />
             <br />
            &nbsp;&nbsp;&nbsp;&nbsp;
         </asp:Panel>
    </div>
</asp:Content

如果我注释掉任何一个javascript方法，那就可以工作..

Answer 1

您包含多个版本的jQuery，第二个版本会覆盖第一个版本。

因此删除与第一个版本关联的所有插件。（在这种情况下为ZClip）

Answer 2

没错。您不能使用相同的jquery插件库（zclip）两次，以便将其附加到$符号。如果您确实需要（源代码和缩小代码），则应为其中一个使用不同的变量名称。否则会引起冲突。

所以，我宁愿你使用这段代码：

            <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
            <script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script> 
            <script type="text/javascript">

                $(document).ready(function () {
                    $('#<%=Button3.ClientID%>').zclip({
                        path: 'ZeroClipboard.swf',
                        copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
                });
                });
             </script>

如果您处于生产环境中。如果您在开发环境中，那么您应该使用jQuery插件的未压缩版本文件。

Jquery在网页上出错

2 个答案: