在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事件

回答

相关问题