複選框單擊事件的執行順序和渲染

我接觸到一個有趣的問題與下面的代碼：複選框單擊事件的執行順序和渲染

<html> 
<head> 
    <meta charset="UTF-8"/> 
    <script src="jquery-1.3.2.min.cache.js"> 
    </script> 
    <script> 
     $(function(){ 
     var c = function(){ 
        console.log('checked:' + $('#test').attr('checked')); 
       }; 
     $('#test').click(c); 
    }); 
    </script> 
</head> 

<body> 
    <input id="test" type="checkbox" value="1">test 
    </input> 
</body> 
</html>

的問題是，當我手動點擊複選框，將打印

checked:true 
checked:false 
checked:true 
checked:false 
....

但如果我用js代碼觸發點擊事件：

$('#test').click()

它將打印像

checked:false 
checked:true

聽起來像手動點擊，複選框本身將呈現爲選中/取消選中，然後觸發點擊事件。

但是，對於代碼爲.click()的JS代碼，情況並非如此。

我的猜測是對的嗎？有沒有我可以參考的幫助文件？

來源

2012-10-09 Feng Xi

只是一個側面說明：現在jQuery達到了1.8.2。 – msanford

另一方面說明：''元素不應該包含內容（但大多數瀏覽器不會因爲關閉標籤而感到不安）。 – nnnnnn

無法使用jQuery 1.8.2重現該問題，[請參閱此小提琴]（http://jsfiddle.net/EBFDU/）。 – Uooo

的問題是，當我手動點擊複選框，將打印

檢查：真檢查：假

我得到：

> checked:true 
> checked:undefined

的attr方法非常可怕（它曾經混淆了屬性和屬性，可能仍然存在），請直接讀取屬性或使用prop。這是更爲有效的寫：

console.log('checked:' + this.checked);

總之，這裏是我以前的評論：

可能是因爲jQuery使用它自己的事件註冊和燒成框架，繞過DOM方法。當手動點擊按鈕時，您將獲得DOM事件序列。當使用jQuery時，你會得到jQuery的一系列事件。

來源

2012-10-09 05:48:30 RobG

對於較舊的jQuery版本，.attr（'checked'）將返回false，如果它未被選中。對於像1.8.x這樣的新版本，它是未定義的。我嘗試使用「this.checked」，同樣的問題。 –

如果'attr'在這種情況下是'getAttribtue'的替代品，那麼它應該返回字符串「null」，因爲* checked *屬性不存在，也不會通過選中複選框來添加。 checked *屬性*設置複選框的默認檢查狀態，而不是它的當前檢查狀態，因此jQuery的'attr'方法從開始就被打破了，仍然是（因爲它試圖將獲取和設置屬性與讀取和設置DOM屬性和處理跨瀏覽器問題都沒有程序員知道發生了什麼）。 – RobG

這個問題的主要問題不在於.prop（）和.attr（）之間的差異。這完全是關於點擊事件執行/複選框渲染順序。 –

複選框單擊事件的執行順序和渲染

回答

相關問題