初心者のjQueryの問題

Question

私はJavaScriptに関する経験がありますが、jQueryに関しては完全なnoobです。基本的には、実際の単純なクリックイベントハンドラを追加して時間を返そうとしています。私はコンソールに何のエラーも受けていませんが、ボタンをクリックしても何も起こりません（テスト目的でconsole.logを追加しました）。ブートストラップパッケージ全体をnugetでインポートしたので、完全なjQueryライブラリがあると思います。私は行方不明の何か他にありますか？前もって感謝します！

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="jQuery.aspx.cs" Inherits="garrettPenfieldUnit10.WebForm2" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server"> 
    <h1>jQuery Page</h1> 
    <p><asp:Label ID="LabelJQ" runat="server" Text="Click the Button!"></asp:Label></P> 
    <asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!"/> 

    <script src="Scripts/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
     $('#ButtonJQ').click(function() { 
      var d = new Date(); 
      document.getElementById(LabelJQ).innerHTML = d.toLocaleTimeString(); 
      console.log('wubba lubba dub dub!'); 
     }); 
    </script> 
</asp:Content> 

Answer 1

ブラウザでそのボタンを検査した場合、私は、サーバーコントロールのIDではないので、あなたが（デフォルトで）、それはid="ButtonJQ"を持っていないことをそのクライアント側のIDを見つけることができます疑い。

1. がそれにClientIDMode="Static"を追加します：

   あなたは、少なくとも3つのオプションがあり

   クライアントIDとしてのサーバーIDを使用するASP.Netを伝え

   <asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!" ClientIDMode="Static"/> 
   

   。

2. 使用ボタンを検索する（クラスのような）何か他のもの：

   <asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!" class="update-time"/> 
   

   その後、JavaScriptで：

   $('.update-time').click(function() { 
       // ... 
   }); 
   

3. あなたのJavaScriptコードは、でASPファイルであるので、 はボタンのClientIDプロパティを使用できます。

   $("#<% ButtonJQ.ClientID %>").click(function() { 
       // ... 
   }); 
   

LabelJQと同じ問題が発生することにご注意ください。

Answer 2

まず、ネットワークタブでjQueryがロードされていることを確認してください。

しかし、2番目のことは、Asp.Netで作業していることと、作成しているページのコントロールが最終的なHTMLではないことです。特に、多くの開発者が書いた多くの要素を持つページを読み込むと、意味的に書かれたクラス名よりもIDの衝突の確率が高くなりますので、IDよりもクラス名を使用して要素にアクセスすることをお勧めします。 Asp.Netは要素のIDに親要素のIDを含むIDを生成することでこの問題を回避します。これが原因でラベルに到達しません。

$(".date-display-element").html(date); 

のように、それ自体がjQueryの$オブジェクト内のCSSのアクセサを使用することによって達成することができる要素を取得これは、任意に日付を追加することを可能にする側の利益（または潜在的な落とし穴を）持っていますあなたのページの他の要素をクラスに適用するだけです。

カップル他のものは：あなたが、私はそれを見つける

loadイベントの任意の並べ替えに何もする必要はありませんので、

1. あなたは検討されているタグ以下のページにスクリプトを追加しました私の裸のjavascriptを匿名で実行される関数にラップして、ページ内の何かと衝突することはありません。あなたの場合、コードは比較的無害ですが、何かを追加する必要があるかもしれません。それは私がクリックイベントのクライアント側だけの目的のいずれかの場合は `Button`に` `UseSubmitBehaviorは= "false" に追加することになり、

   (function(){ $('#ButtonJQ').click(function() { var d = new Date(); $(".date-display-element").html(d.toLocaleTimeString()); console.log('wubba lubba dub dub!'); }); })();