如何調試爲什麼「點擊」JavaScript事件處理程序未被調用？

我已經使用jQuery API安裝了<button>元素的click JavaScript事件的處理程序，但是當按鈕實際上已被點擊時，處理程序不會被調用。我怎樣才能調試爲什麼不調用事件處理程序？我正在Visual Studio 2010中開發並在Google Chrome Developer Tools的幫助下進行調試。如何調試爲什麼「點擊」JavaScript事件處理程序未被調用？

我是新來的JavaScript和不知道的調試方法:)

編輯

這是按鈕的有問題的HTML聲明：

<button id="start-lint">Submit</button>

的相關JavaScript：

$('button').button(); 
var btn = $("button#start-lint"); 
log.debug("Button: %s", btn); 
btn.click(function() { 
    log.debug("Button clicked"); 
});

讓我知道是否需要更多信息。

EDIT 2

不知怎的，我得到它的工作，不知道什麼是錯擺在首位，但至少現在我知道如何判斷一個元素被發現或不！

來源

2011-08-31 aknuds1

向我們展示一些代碼！（很可能你的選擇器是錯誤的，所以你沒有綁定到你想要的元素。） – Dexter

如何將click事件綁定到按鈕？很難調試沒有任何事情發生。 – m90

您是否在控制檯中看到任何錯誤？如果不是那麼最有可能的選擇是錯誤的，因爲德克斯特說... – Rafay

如果代碼實際上是被觸發的，你只能調試它，它似乎不是。

你可以嘗試看看它是否找到使用長度的選擇器。 alert（$（「＃myselector」）。length）; 或 console.log（$（「＃myselector」）。length）;

對於調試JavaScript我建議你使用FIREBUG for Firefox（http://getfirebug.com/） - 你可以設置斷點，寫入控制檯等，它給出了所有可能的變量，對象等顯示。教程可以在這裏找到：http://www.youtube.com/watch?v=2xxfvuZFHsM

（你說你在哪裏新的jQuery/JavaScript，因此希望它幫助：d）

來源

2011-08-31 07:29:18

我記錄了按鈕的長度，它是1，顯然它被發現（相反，我嘗試了一個不存在的ID，然後長度爲0）。看起來像一種有價值的技術，謝謝！ Firebug比Chrome開發者工具更好嗎？ – aknuds1

哦，好吧:) Chrome開發者一樣好。第一次使用Firebug可能會更容易，但如果您已經使用Chrome Developer，則無需切換 - 就像功能強大！很高興看到你得到它的工作！ –

我猜$('button').button();會引發異常，並且其餘代碼不會執行。註釋掉這條線，看看它是否有效。

原答覆：

粘貼代碼，或它的相關部分。
添加debugger;語句到您的處理函數，看看你是否輸入它。
如果不是，那麼您註冊處理程序的方式有問題。
如果你輸入它，可能是處理程序本身有問題。

來源

2011-08-31 07:22:58

我在處理程序中有一個調試日誌記錄語句，我可以告訴它沒有輸入，所以我需要調試的是爲什麼處理程序沒有正確安裝。是不是有一些工具可以幫助我確定爲「點擊」事件安裝了哪個處理程序？ – aknuds1

更新了答案。 –

您的按鈕可能看起來像這樣

<input type="button" value="Click" />

這個你綁定一個單擊處理像

$(document).ready(function(){ 
    $("input[type='button']").click(function(e){ 
     alert("somebody clicked a button"); 
     }); 
});

http://jsfiddle.net/6gCRF/5/

但這種方法的缺點是每次點擊按鈕都會被調用，以防止您可能想要爲您的按鈕添加一個id並選擇該特定按鈕，例如

<input type="button" value="Click" id="specific" />

附加一個單擊處理程序像

$(document).ready(function(){ 
    $("#specific").click(function(){ 
    alert("specific button clicked"); 
    }); 
});

http://jsfiddle.net/6gCRF/4/

編輯

你的情況

通過ID選擇按鈕

$(document).ready(function(){ 
    $("#start-lint").clcik(function(){ 

    console.log("clicked"); 
    }); 
});

你也可以使用僞:button選擇

$(document).ready(function(){ 
    $(":button").click(function(e){ 
      console.log("clicked"); 
      }); 
});

have a look at jquery selectors

來源

2011-08-31 07:34:38 Rafay

AFAICT你最後一個例子對應我在做什麼（見我粘貼的代碼）。 – aknuds1

@ aknuds1仔細看看你正在使用'button'，我用'：button'注意到冒號'：' – Rafay

內嵌JavaScript是在頁面加載執行，因此，如果按鈕是JavaScript之後定義的代碼將無法找到它，所以能不附加處理程序。您需要將該JavaScript放入文檔就緒（或onload）函數中，這意味着它將在按鈕（和頁面上的所有內容）加載後執行，和/或將其放在源代碼中的按鈕之後。

來源

2011-08-31 07:38:26 nnnnnn

你也可以使用.delegate（）函數將該屬性添加到任何新創建的元素並與給定的選擇 –

如何調試爲什麼「點擊」JavaScript事件處理程序未被調用？

回答

相關問題