jquery: Add code to click event

Question

I want to keep a reference of the button click function, do my stuff, then run the original click function.

I know usually I can do such things in document.ready, e.g:

    var originalOnClick = $("#myBtn").click;
    $("#myBtn").click = function() {
      // do my staff here, and only then call the original:
      originalOnClick();
    }

(please correct this code if it is wrong!)

but, I have a special case. in my page onLoad function, there are asynchronous ajax calls. so functions called on document.ready are actually called before the ajax code was finished.

Is there a way to change the click event when calling click() or onclick() ? I mean, is there an event that is called immediatly before\after the click event?

or that I must ask the user to click a (I can see that this page is loaded) button, and only then I can do my staff ?

EDIT 1: The ajax code is in an included script. I cannot change it.

EDIT 2: Possible solution: hide the original button, but use its event:

HTML:

 <div class="object1" style="display: none;" >original button.</div>
 <div class="object2">my button.</div>

JS:

function doMyStuff() {
    alert(' doMyStuff .');
}

$(document).ready(function(){

  $('.object1').click(function(){
     alert('original staff. ');        
  });  // actually, this is just a test code. In my project, I cannot edit this function

  $('.object2').click(function() {
   doMyStuff();
    $('.object1').click();      
  });
});

Why exactly do you need to redefine the click method of one particular element? Replacing the method will only affect that specific jQuery object. When you later on retrieve the same element with $("#myBtn"), it will return a new jQuery object without your previous changes. Please elaborate more about what you're intending to do with this, so we can get a better understanding and suggest better alternatives. — Mattias Buelens
– Mattias Buelens, Commented Jan 20, 2013 at 13:02
this page is getting\setting values of hardware. The original click event sends new values to the hardware. I want to add a message for the user "your values are being committed". — Atara
– Atara, Commented Jan 20, 2013 at 13:06
Are those values being sent in another event handler being bound to click? Or are those values coming from a <form> being submitted by clicking on an <input type="submit">? — Mattias Buelens
– Mattias Buelens, Commented Jan 20, 2013 at 13:07
on window.onLoad() , ajax gets the values, and on button.click(), ajax sets the values. — Atara
– Atara, Commented Jan 21, 2013 at 8:09

mccannf · Accepted Answer · 2013-01-20 13:05:21Z

0

You can have a click event that then removes itself as an event handler and then creates a new event handler:

function doNormalStuffWithClick() {
}

//First click
$('#myBtn').click(function() {
    // switch off this event handler
    $(this).off('click');
    // do stuff with first click
    // ....
    doNormalStuffWithClick();

    // Set up handler for subsequent clicks
    $("#myBtn").click(function() {
      doNormalStuffWithClick();
    });
}

answered Jan 20, 2013 at 13:05

mccannf

16.6k3 gold badges54 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mattias Buelens Over a year ago

$(this).off('click') will remove all bound event handlers. You probably only want this single event handler to be removed, in which case you need to name it or store it in a variable first and call $(this).off('click', myHandler).

Atara Over a year ago

will the following work? it looks recursive, and what happens when it is called again - var originalOnClick = NULL; function doMyStuff() { myStuff(); if (originalOnClick) originalOnClick(); } //First click $('#myBtn').click(function() { originalOnClick = $("#myBtn").click; // will it save the original ? $(this).off('click'); doMyStuff(); // what happens when this function is called the second time ?! }

Atara Over a year ago

I found another solution, use myButton, which calls originalButton.click()

THEtheChad · Accepted Answer · 2013-01-20 13:03:18Z

0

It sounds like you want to prevent a user from clicking your button before the ajax functions have completed. There are several ways to do this. The easiest way looks like this:

var ajaxCount = 0;

$.ajax('some/url', function(res){
    ajaxCount++
    // code here
});

$.ajax('some/url', function(res){
    ajaxCount++
    // code here
});

$('#myBtn').click(function(e){
    if(ajaxCount != 2) return false;

    // code here
});

In this form, you're simply checking to make sure both ajax functions have fired.

answered Jan 20, 2013 at 13:03

THEtheChad

2,4321 gold badge17 silver badges20 bronze badges

1 Comment

Mattias Buelens Over a year ago

Assuming that this is indeed what the OP wants to achieve, there's a much easier way to do this using AJAX promises and jQuery.when.

Konrad Gadzina · Accepted Answer · 2013-01-20 13:09:00Z

0

If binding code before your AJAX requests are done is an issue, you can call it on ajaxSuccess:

$(document).ajaxSuccess(function () {
    // do stuff
});

If you want to do something after all AJAX requests are finished, you can check variables that you can set when each request begins. You can even try using ajaxStart to change number of current requests and later check it in ajaxSuccess

$(document).ajaxStart(function () {
    // do something
});

answered Jan 20, 2013 at 13:09

Konrad Gadzina

3,4021 gold badge21 silver badges29 bronze badges

Collectives™ on Stack Overflow

jquery: Add code to click event

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related