2

更新: Google Chrome でこの Web サイトを試してみましたが、IE と同じ結果になりました

更新: Default.aspx スクリプトを次のように変更しました。

$("#btnSearch").click(function () {

とへのボタン

<asp:Button ID="btnSearch" runat="server" Text="Search"  ClientIDMode="Static" />

私は Ajax Control Toolkit を数年間使用しています。jQueryで遊びたい。簡単な jQuery チュートリアルが機能しません。チュートリアルを使用してjQueryを学習しています：

jquery_webforms_Using_Animations

このチュートリアルでは、ダイアログ ボックス (この場合は検索ウィンドウ) をポップアップしようとしました。

Visual Studio 2010 を使用して、新しい Web サイトを作成します。Visual Studio は、スクリプト フォルダーにマスター ページ、既定のページ、jquery スクリプトなどを自動的に作成します。

マスター ページに ScriptManager を追加します。マスター ページからログイン情報を削除します。jquery チュートリアルに複雑さを加える必要がないためです。

Default.aspx の「BodyContent」に Visual Studio が作成したコンテンツを削除します。

Default.aspx のヘッダー コンテンツに jquery を読み込むスクリプト コマンドを追加します。ダイアログ ボックスをポップアップするボタンにイベント ハンドラーをアタッチする短いスクリプトを追加します。何が起動しているのかを確認するために、いくつかのアラートを投入しました。

コンテンツ本文に、ダイアログをポップアップするボタンを追加し、ポップアップするダイアログを追加します。

アプリケーションをコンパイルして実行すると、Default.aspx が表示されます。[検索] ボタンをクリックすると、ポストバックされますが、アラートもポップアップ ダイアログも表示されません。

もっと単純な例は想像できませんでしたが、うまくいきません。何か案は？ありがとう。

マスター ページ:

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
    <div class="header">
        <div class="title">
            <h1>
                My ASP.NET Application
            </h1>
        </div>
        <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
        </div>
    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
</div>
<div class="footer">

</div>
</form>
</body>
</html>

ここに Default.aspx があります

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="~/Scripts/jquery-1.4.1.js" type="text/javascript" />
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        alert("Setting Click event handler");
        $("<%=btnSearch.clientID%>").click(function () {
            alert("Showing dialog");
            $("#searchdialog").slideDown("slow");
        });
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button ID="btnSearch" runat="server" Text="Search" />
<div id="searchdialog" style="position: absolute; top: 65px; right: 5px; width: 200px;
    display: none;">
    <div>
        Search For Symbol</div>
    <div>
        Enter a symbol:
        <input type="text" name="txtSymbolSearch" id="txtSymbolSearch" value="" />
        <input type="button" id="btnSymbolSearch" value="Search" />
    </div>
</div>
</asp:Content
4

1 に答える 1

3

jQuery の ID に「#」がありません:

$("#<%=btnSearch.clientID%>")

これを試して：

 <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            alert("Setting Click event handler");
            $("#<%=btnSearch.clientID%>").click(function () {
                alert("Showing dialog");
                $("#searchdialog").slideDown("slow");
            });
        });
    </script>
于 2012-05-31T13:15:55.690 に答える