在 jquery 插件中触发点击不起作用

Question

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

在里面，我有以下sn-p的代码：

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 元素就像你所做的那样