在jQuery中控制訂單觸發的點擊UI事件

我有一個<input type="checkbox" />，它有一個通過jQuery的.click函數綁定到它的點擊處理程序。然後，根據其狀態進行一些計算：在jQuery中控制訂單觸發的點擊UI事件

$(':checkbox').click(function() { 
    if (this.checked) { 
     console.log("ACTIVE"); 
    } else { 
     console.log("INACTIVE"); 
    } 
});

這一切都在UI很好的，但是，在我的單元測試，我想模擬此元素的點擊，並確保將正確的代碼運行。

$(testElement).click();

的問題是，處理程序之前調用默認的瀏覽器操作的。因此，this.checked值是顛倒的。也就是說，直到我的處理程序運行之後，纔會更改它的checked屬性。

有沒有解決這個辦法嗎？我可以綁定不同的事件嗎？有沒有不同的方式來以編程方式觸發點擊？

來源

2011-03-17 nickf

望着這blog post你也許可以做，讓您正在尋找的行爲在以下幾點：

$(":checkbox")[ 0 ].checked = !$(":checkbox")[ 0 ].checked; 
$(":checkbox").triggerHandler("click");

而且隨着使用triggerHandler()，你只會觸發由jQuery綁定的事件，而不是默認行爲。

代碼示例jsfiddle。

來源

2011-03-17 18:54:45

嘗試

$(":checkbox").change(function(){ 
    if($(this).is(":checked")){ 
     console.log("ACTIVE"); 
    } else { 
     console.log("INACTIVE"); 
    } 
}); 

$(":checkbox").attr("checked", true).change();

來源

2011-03-17 18:34:01 mattsven

這實際上並沒有改變複選框的狀態。 – nickf 2011-03-17 18:37:34

請參閱編輯... – mattsven 2011-03-17 18:41:33

爲什麼用測試jQuery來加重你的單元測試？在匿名函數中直接使用代碼來處理世俗的事情，而更重要的東西則使用獨立的函數，可以單獨進行單元測試。

事情是這樣的：

$(':checkbox').click(function() { checkboxClickHandler($(this)); });

而在你的單元測試：

checkboxClickHandler($(':checkbox'));

而且你的函數：

function checkboxClickHandler(element) 
{ 
    alert(element.is(':checked')); 
}

來源

2011-03-17 19:21:10

是的，但首先可能很難獲得確切函數的參考，其次，它不能幫助進行迴歸測試。我想看看是否有其他代碼添加了另一個影響我的程序的處理程序。 – nickf 2011-03-18 09:58:14

在jQuery中控制訂單觸發的點擊UI事件

回答

相關問題