初學jQuery問題

我對JavaScript有一些經驗，但是當談到jQuery時，我是一個完整的noob。基本上我試圖添加一個真正簡單的點擊事件處理程序來返回時間。我在控制檯中沒有收到任何錯誤，但是單擊按鈕時沒有任何反應（我純粹爲了測試目的添加了console.log）。我通過nuget導入了整個bootstrap包，所以我相信我有完整的jQuery庫。還有什麼我失蹤？提前致謝！初學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>

來源

2017-04-14 Garrett Penfield

如果您檢查在瀏覽器按鈕，我懷疑你會發現，它並沒有id="ButtonJQ"，因爲服務器控件的ID是不是（默認）的客戶端ID。

你至少有三種選擇：

添加ClientIDMode="Static"它：

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

這告訴ASP.Net使用服務器ID爲客戶ID。

用別的東西（如類）來查找按鈕：

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

然後在JavaScript：

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

由於JavaScript代碼是在 ASP文件，你可能使用您的按鈕屬性：

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

請注意，您將遇到與LabelJQ相同的問題。

來源

2017-04-14 13:20:15

我想補充的'UseSubmitBehavior =「假」'的'Button'，在單擊事件的唯一客戶端的目的無論如何。 – ibubi

@ibubi：我對ASP.Net的'Button'不太瞭解。 :-)如果它呈現爲'

謝謝您的信息！我改變了我的代碼，而不是ID的類，但不幸的是我仍然得到相同的結果。 –

-1

首先，你應該檢查你的網絡選項卡，以確保jQuery被加載。

但第二件事是，你明確與Asp.Net合作，你正在寫的頁面中的控件不是最終的HTML。我建議在任何情況下使用類名稱而不是ID來訪問元素，因爲它更安全 - 尤其是當您可能會加載包含許多開發人員編寫的許多元素的頁面時，IDS的碰撞機率高於語義寫入的類名稱。 Asp.Net通過在元素的ID中生成包括父元素ID的ID來解決這個問題，這就是爲什麼你沒有到達標籤。

獲取本身可以通過使用jQuery的$對象中的CSS訪問來完成的元素，如

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

這將允許您將日期添加到任何的附帶好處（或潛在的缺陷）你的頁面中的其他元素僅僅是通過應用一個類來實現的。

一對夫婦的其他東西：

您已經將腳本標籤下方的頁面被考慮，所以你不需要做任何事情上的任何類型的負載情況下的
我發現它最好將所有裸露的JavaScript包裝在匿名執行的函數中，這樣就不會有任何與頁面中的任何內容發生衝突的機會。在你的情況下，代碼是相對無害的，但你永遠不知道什麼時候可能需要添加一些東西。也就是說，

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

來源

2017-04-14 13:34:32

這是爲什麼降低？ –

初學jQuery問題

回答

相關問題