在jQuery中控制订单触发的点击UI事件

我有一个 ，它有一个通过jQuery的.click函数绑定到它的点击处理程序。 然后根据其状态执行一些计算：

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

这在UI中都很好，但是，在我的unit testing中，我想模拟对此元素的单击并确保运行正确的代码。

 $(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进行unit testing？ 直接在匿名函数中使用代码来处理普通的东西，对于更重要的东西，使用可以独立进行unit testing的单独函数。

像这样的东西：

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

在你的unit testing中：

 checkboxClickHandler($(':checkbox')); 

而你的function：

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