Question

我为jQuery编写了一个插件，并使用了http://jqueryboilerplate.com/的样板模式

在里面，我有以下代码片段：

ShoppingcartPlugin.prototype = {
    bindButtons : function(){
         var self = this;
             $('.addtocart').on('click.shoppingCart', function(event){
                event.preventDefault();
                $('.product-size-wrong').addClass('hidden');
                $('.product-added').addClass('hidden');

                if(!self.validateForm())
                    return;

                self.updateProductDataInDOM(event);

                var b = self.addProduct(event);
                if(b){
                    self.addExtraProducts(event); //aanvullingen

                    self.updatePrices();
                    self.calculateWeight();
                    self.calculateDeposit();
                    $('.product-added').removeClass('hidden');
                }
                self.persist();

     });
         $("body").on("click.shoppingCart","a.removefromcart", function(event){
            self.logger("a.removefromcart clicked");
            event.preventDefault();
            self.removeProduct(event);
            self.updateCartTotalPrice();
            self.updatePrices();
            self.calculateWeight();
            self.calculateDeposit();
            event.stopPropagation();
        });
    }
}

现在，我编写了一个Jasmine测试用例，它应该模拟“a.removefromcart”元素的点击。之后，我可以监视一些Ajax调用，看看结果是否正确。

所以我做到了这一点：

describe('Removing products testsuite', function(){
    it('Should yield an empty cart, when the X is clicked in a cart with a single product', function(){
        $('#shoppingcart').shoppingCart();
        allProducts = {};

        $('.addtocart').click(); //simulate click, and adding a product

        expect($.ajax.calls[1].args[0].data.shoppingCart[0].quantity).toBe(1);
        expect($.ajax.calls[1].args[0].data.shoppingCart.length).toBe(1);       

        $('body').trigger('click.shoppingCart','a.removefromcart');

        console.log($.ajax.calls);
        expect($.ajax.calls[2].args[0].data.shoppingCart.length).toBe(0);
    });
});

点击的第一次模拟工作（用于添加产品），但是不会触发删除，即永远不会调用'on'的回调。

实现有效，但我希望在插件的这一部分有一些测试用例。

我采取了正确的方法吗？有什么建议我可以调试这个，以便.on回调被触发？

编辑：我应该注意到我使用了$（'a.removefromcart'）。on（'click.shoppingCart'，function（）{...}）; ，但是这有一些我不喜欢的副作用，所以我更喜欢保持点击绑定与现在相同。我只是想以编程方式触发它。

Answer 1

$('body').trigger('click.shoppingCart','a.removefromcart');将无效，因为您正在触发body元素的事件，其中处理程序已为a.removefromcart元素注册。

您需要的是

$('a.removefromcart').trigger('click',);

为什么

click.shoppingCart与普通点击事件相同，shoppingCart部分是一个名称空间，通常用于从元素中删除特定的事件处理程序。因此，当事件被触发时，.shoppingCart部分不应该在那里。

同样$("body").on("click.shoppingCart","a.removefromcart", ...);表示您正在为a.removefromcart类型的元素注册委托事件处理程序，因此如果您希望调用处理程序，则需要在a.removefromcart元素上触发它。如上所示，不像你做的那样在body元素中

触发jquery插件中的单击不起作用

1 个答案: