jQuery的單擊事件內部形狀

Question

我有這樣一個表單內按鈕：

<form> 
    <input type="text" /> 
    <input type="password" /> 
    <button type="button" class="btn-login">Log in</button> 
</form> 

我想通過在JS這樣做是爲了觸發按鈕的單擊事件：

$(document).ready(function() { 
    $('.btn-login').live("click", function() { 
      alert("Button clicked!"); 
     }); 
}); 

但由於某種原因，這是行不通的。

如果我刪除圍繞文本框和按鈕的<form></form>，會觸發點擊事件，但這也意味着我的頁面顯示不正常，所以我不知道是否有辦法觸發按鈕的單擊事件在表單內。

Answer 1

如果您使用的是最新版本的Jquery，請嘗試on而不是live，因爲它在版本1.9中不推薦使用。如果您使用的是1.7版本，那麼您的代碼將起作用。

$(document).ready(function() { 
    $('.btn-login').on("click", function() { 
      alert("Button clicked!"); 
     }); 
}); 

JS Fiddle .on() example

JS Fiddle .live() example

Answer 2

代替

<button type="button" class="btn-login">Log in</button> 

使用

<input type="button" class="btn-login">Log in</input> 

Answer 3

.live功能（）已被從除去JQ uery 1.9。 參考：http://api.jquery.com/live/

請使用.on（）函數綁定事件。 參考：http://api.jquery.com/on/

解決方案：

$(document).ready(function() { 
    $('.btn-login').on("click", function() { 
      alert("Button clicked!"); 
     }); 
}); 

Answer 4

我的猜測是，你正在使用jQuery的新版本，我用1.9.1和jQuery.live測試不工作（jQuery的去除1.9）。一個簡單的變化到jQuery.on，它立即生效。

<form> 
    <input type="text" /> 
    <input type="password" /> 
    <button type="button" class="btn-login">Log in</button> 
</form> 

$(document).ready(function() { 
    $('.btn-login').on("click", function() { 
     alert("Button clicked!"); 
    }); 
}); 

上jsfiddle

作爲一個說明評論，只喜歡與input元素創建按鈕 按鈕元素功能創建this is what the W3C has to say

按鈕，但他們提供更豐富的渲染 可能性：BUTTON元素可能有內容。例如，包含圖像的BUTTON元素的功能類似於並可能類似於 INPUT元素，其類型設置爲「圖像」，但BUTTON元素 類型允許內容。

按鈕元素 - W3C

This article demonstrates some of the differences between button and input

W3cschools建議什麼，？

提示和注意事項注意：如果您在HTML表單中使用該元素，則不同的瀏覽器可能會提交不同的值。用於在HTML表單中創建 按鈕。

W3cschools：HTML標籤

w3cschools沒有一個權威的機構。據我所知，唯一有真正問題的瀏覽器是IE6 & IE7，所以我猜他們的建議有點過時了。有可能有其他人，但我找不到具體的東西。我能找到的最好是在MDN <\button>

IE7有凡提交與點擊我的表單時的錯誤，發送POST數據將 結果爲myButton =點擊我，而不是爲myButton = foo中。 IE6有一個甚至 糟糕的錯誤，其中通過一個按鈕提交表單將提交表格的所有 按鈕，以和IE7一樣，此錯誤已在IE8

Answer 5

被固定 同樣的錯誤，我認爲下面的代碼應該工作你

$(document).ready(function() { 
    $(document).delegate('.btn-login', "click", function() { 
      alert("Button clicked!"); 
     }); 
}); 

它使用jquery的委託，所以即使它通過ajax稍後在DOM中添加，此功能將工作。

Answer 6

可以遷移到1.1.0到1.9.1使用.live()

$(document).ready(function() { 
    $('.btn-login').live("click", function() { 
      alert("Button clicked!"); 
     }); 
}); 

[工作實例]（http://jsfiddle.net/3hQbG/）