Question

我想制作一个通用插件，它具有以下逻辑：

查找＃add-to-cart按钮保存以前附加的点击处理程序（Idon无法访问此代码）
附加插件的点击处理程序，显示带有电子邮件选择的弹出窗口。
成功选择加入后触发原始点击处理程序。

我无法访问网站的代码，因此我必须制作通用解决方案。

我的实现如下：

var $addToCart = $('#add-to-cart');
var origClickHandler = $addToCart.click;
$addToCart.off('click').on('click', function() {
    // code to show opt-in popup ...
    var $optinButton = /* ... */ ;
    $optinButton.click(function() { // binding opt-in button to original click handler
        origClickHandler.apply($addToCart);
    });
});

但我在第origClickHandler.apply($addToCart)行上收到错误：

jquery-2.1.1.min.js:4 Uncaught TypeError: this.on is not a function
    at HTMLButtonElement.n.fn.(anonymous function) (http://www.myshop.com/js/jquery-2.1.1.min.js:4:4893)

更新

我的目的是绑定我的插件点击处理程序，它将进一步调用原始点击处理程序（而不是完全替换原始点击处理程序）
我尝试将.apply()替换为.call()并遇到同样的错误。
我尝试将origClickHandler.apply($addToCart);替换为$addToCart.off('click').on('click', origClickHandler); $addToCart.click();并且同样出错

更新2

我通过克隆按钮并隐藏原始按钮来完成我想要的任务：

var $addToCart = $('#add-to-cart');
var $addToCartClone = $addToCart.clone(false); // false - not copying the events and handlers
$addToCart.before($addToCartClone).hide();
$addToCartClone.click(function() {
    // code to show opt-in popup ...
    var $optinButton = /* ... */ ;
    $optinButton.click(function() { // binding opt-in button to original click handler
        $addToCart.click();
    });
});

似乎在我调用.off('click')时，jquery会禁用附加的点击处理程序，我不能再使用它了。我不知道原因，但它应该有用。

如果有人在调用.off('click')后找到原始点击处理程序停止工作的原因，我会留下未回答的问题。

如何正确拦截jquery点击处理程序？

0 个答案: