jQuery 輸入按鈕點擊事件監聽器

Question

全新的 jQuery。 我試圖在我的頁面上為以下控件設置一個事件偵聽器，單擊該控件時會顯示警報：

<input type="button" id="filter" name="filter" value="Filter" />

但它沒有用。

$("#filter").button().click(function(){...});

如何使用 jQuery 為輸入按鈕控件創建事件偵聽器？

Answer 1

首先， button()是一個 jQuery ui 函數，用於創建與 jQuery 核心無關的按鈕小部件，它只是為按鈕設置樣式。
因此，如果您想使用該小部件，請添加 jQuery ui 的 javascript 和 CSS 文件，或者將其刪除，如下所示：

$("#filter").click(function(){
    alert('clicked!');
});

可能導致您出現問題的另一件事是，如果您沒有等待呈現輸入並在輸入之前編寫代碼。 jQuery 有ready 函數，或者它的別名$(func) ，一旦 DOM 准備好就執行回調。
用法：

$(function(){
    $("#filter").click(function(){
        alert('clicked!');
    });
});

因此，即使訂單是這樣，它也會起作用：

$(function(){
    $("#filter").click(function(){
        alert('clicked!');
    });
});

<input type="button" id="filter" name="filter" value="Filter" />

演示

Answer 2

$("#filter").click(function(){
    //Put your code here
});

Answer 3

更多關於 gdoron 的回答，也可以這樣做：

$(window).on("click", "#filter", function() {
    alert('clicked!');
});

無需將它們全部放入$(function(){...})