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

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 回调吗？

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

Answer 1

$('body').trigger('click.shoppingCart','a.removefromcart');将不起作用，因为您正在触发 body 元素的事件，因为处理程序是为 a.removefromcart 注册的元素。

你需要的是

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

为什么

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

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