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

Question

我有一個<input type="checkbox" /> ，它有一個通過jQuery的.click函數綁定到它的點擊處理程序。 然后根據其狀態執行一些計算：

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

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

$(testElement).click();

問題是在默認瀏覽器操作之前調用處理程序，因此this.checked的值被反轉。 也就是說，在我的處理程序運行之后，它才會更改其已checked屬性。

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

Answer 1

查看此博客文章，您可以通過執行以下操作獲得您正在查看的行為：

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

通過使用triggerHandler() ，您將只觸發由jQuery綁定的事件而不是默認行為。

關於jsfiddle的代碼示例。

Answer 2

嘗試

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

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

Answer 3

為什么用測試jQuery來加重你的單元測試？ 直接在匿名函數中使用代碼來處理普通的東西，對於更重要的東西，使用可以獨立進行單元測試的單獨函數。

像這樣的東西：

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

在你的單元測試中：

checkboxClickHandler($(':checkbox'));

而你的功能：

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