javascript jQuery：获取对单击事件的引用并稍后触发它？

jQuery: Get reference to click event and trigger it later?

提问by Rob Stevenson-Leggett

I want to wrap an existing click event in some extra code.

我想用一些额外的代码包装一个现有的点击事件。

Basically I have a multi part form in an accordion and I want to trigger validation on the accordion header click. The accordion code is used elsewhere and I don't want to change it.

基本上我在手风琴中有一个多部分表单，我想在手风琴标题单击时触发验证。手风琴代码在别处使用，我不想改变它。

Here's what I've tried:

这是我尝试过的：

   //Take the click events off the accordion elements and wrap them to trigger validation
    $('.accordion h1').each(function (index, value) {
        var currentAccordion = $(value);
        //Get reference to original click
        var originalClick = currentAccordion.click;

        //unbind original click
        currentAccordion.unbind('click');

        //bind new event           
        currentAccordion.click(function () {
            //Trigger validation
            if ($('#aspnetForm').valid()) {
                current = parseInt($(this).next().find('.calculate-step').attr('data-step'));             
                //Call original click.
                originalClick();
            }
        });
    });

jQuery throws an error because it's trying to do this.triggerinside the originalClickfunction and I don't think thisis what jQuery expects it to be.

jQuery 抛出错误，因为它试图this.trigger在originalClick函数内部执行，而我认为这不是thisjQuery 所期望的。

EDIT: Updated code. This works but it is a bit ugly!

编辑：更新的代码。这有效，但有点难看！

   //Take the click events off the accordion elements and wrap them to trigger validation
    $('.accordion h1').each(function (index, value) {
        var currentAccordion = $(value);
        var originalClick = currentAccordion.data("events")['click'][0].handler;
        currentAccordion.unbind('click');
        currentAccordion.click(function (e) {
            if ($('#aspnetForm').valid()) {
                current = parseInt($(this).next().find('.calculate-step').attr('data-step'));
                $.proxy(originalClick, currentAccordion)(e);
            }
        });
    });

采纳答案by gb.

I think this:

我认为这：

var originalClick = currentAccordion.click;

Isn't actually doing what you think it is - you're capturing a reference to the jQuery click function, rather than event handler you added, so when you call originalClick() it's equivalent to: $(value).click()

实际上并没有按照您的想法去做 - 您正在捕获对 jQuery click 函数的引用，而不是您添加的事件处理程序，因此当您调用 originalClick() 时，它相当于： $(value).click()

回答by Frank Forte

I finally came up with something reliable:

我终于想出了一些可靠的东西：

$(".remove").each(function(){
    // get all our click events and store them
    var x = $._data($(this)[0], "events");
    var y = {}
    for(i in x.click)
    {
    if(x.click[i].handler)
    {
    y[i] = x.click[i].handler;
    }
    }

    // stop our click event from running
    $(this).off("click")

    // re-add our click event with a confirmation
    $(this).click(function(){
    if(confirm("Are you sure?"))
    {
        // if they click yes, run click events!
        for(i in y)
        {
        y[i]()
        }
        return true;
    }
    // if they click cancel, return false
    return false;
    })
})

This may seem a bit weird (why do we store the click events in the variable "y"?)

这可能看起来有点奇怪（为什么我们将点击事件存储在变量“y”中？）

Originally I tried to run the handlers in x.click, but they seem to be destroyed when we call .off("click"). Creating a copy of the handlers in a separate variable "y" worked. Sorry I don't have an in depth explanation, but I believe the .off("click") method removes the click event from our document, along with the handlers.

最初我试图在 x.click 中运行处理程序，但是当我们调用 .off("click") 时它们似乎被破坏了。在单独的变量“y”中创建处理程序的副本有效。抱歉，我没有深入的解释，但我相信 .off("click") 方法会从我们的文档中删除 click 事件以及处理程序。

http://www.frankforte.ca/blog/32/unbind-a-click-event-store-it-and-re-add-the-event-later-with-jquery/

http://www.frankforte.ca/blog/32/unbind-a-click-event-store-it-and-re-add-the-event-later-with-jquery/

回答by Steven Bakhtiari

I'm not a jQuery user, but in Javascript, you can set the context of the thiskeyword.

我不是 jQuery 用户，但在 Javascript 中，您可以设置this关键字的上下文。

In jQuery, you use the $.proxy()method to do this.

在 jQuery 中，您使用$.proxy()方法来执行此操作。

$.proxy(originalClick, value);
originalClick();

Personally, I'd look at creating callback hooks in your Accordion, or making use of existing callbacks (if they exist) that trigger when opening or closing an accordion pane.

就我个人而言，我会考虑在您的手风琴中创建回调挂钩，或者利用在打开或关闭手风琴窗格时触发的现有回调（如果存在）。

Hope that helps :)

希望有帮助:)

回答by abesto

currentAccordion.click is a jQuery function, not the actual event.

currentAccordion.click 是一个 jQuery 函数，而不是实际的事件。

Starting with a brute-force approach, what you'd need to do is:

从蛮力方法开始，您需要做的是：

• Save references to all the currently bound handlers
• Unbind them
• Add your own handler, and fire the saved ones when needed
• Make sure new handlers bound to click are catched too

• 保存对所有当前绑定的处理程序的引用
• 解除绑定
• 添加您自己的处理程序，并在需要时触发保存的处理程序
• 确保绑定到点击的新处理程序也被捕获

This looks like a job for an event filter plugin, but I couldn't find one. If the last point is not required in your application, then it's a bit simpler.

这看起来像是一个事件过滤器插件的工作，但我找不到。如果您的应用程序中不需要最后一点，那么它会更简单一些。

Edit:After some research, the bindIffunction shown herelooks to be what you'd need (or at least give a general direction)

编辑：经过一些研究，这里bindIf显示的功能看起来是你需要的（或者至少给出一个总体方向）