Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.trigger inside the originalClick function and I don't think this is what jQuery expects it to be.

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);
            }
        });
    });
like image 407
Rob Stevenson-Leggett Avatar asked Oct 13 '11 10:10

Rob Stevenson-Leggett


People also ask

How do I trigger a click event without clicking?

If you want native JS to trigger click event without clicking then use the element id and click() method of JavaScript.

How do you trigger a click event for a hyperlink?

Answer: Use the jQuery click() Method You can use the click() method to trigger a click on a link programmatically using jQuery.

How can write onclick button function in jQuery?

To trigger the onclick function in jQuery, click() method is used. For example, on clicking a paragraph on a document, a click event will be triggered by the $(“p”). click() method. The user can attach a function to a click method whenever an event of a click occurs to run the function.

How do you bind change event in jQuery for dynamically added HTML element?

If you try to bind the elements that are dynamically added to the DOM using the click() method of jQuery, this will not work, because it only binds the click event to elements that exist at the time of the “binding”. To bind the click event to all existing and future elements, use jQuery's on() method.


1 Answers

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()

like image 155
gb. Avatar answered Sep 24 '22 16:09

gb.