Can I anticipate an on click function in jQuery?

Question

I've this problem

I've some element, actually <li> elements, and over these element I've one operation applied to them, easily done like this:

$('.panelTabs li').on('click', function () {
  // ..some operation that change some tab associated to the list
});

then in my code i need to apply another click operation that has to check if I can execute the previous operation or not.

$('.panelTabs li').on('click', function (ev) {
  // ..some operation that makes some check
  if(bActiveRequests === 0){
    ev.stopPropagation();
  }
});

but the first function is applied before the second function containing the check, so of course my stopPropagation() cannot work, because it's executed after.

So I'm asking if there is a way to add anticipate a click function before a function already applied to the same element.

I thought about saving that function in a variable, then remove that function from the li, then add my function, then add the previous function... but that's a bit tricky and not nice at all.
I could include my second JavaScript file before the first one. But that is a bit tricky as well because of the code.

Any ideas?

Why not have the first click event make a call to a `CanContinue` function that performs the validation and potentially cancels the event? — xDaevax, Aug 20 '14 at 14:23
why don't you merge these functionalities into one event callback? — sunpietro, Aug 20 '14 at 14:23

score 2 · Accepted Answer · edited May 23 '17 at 12:13

There are at least two approaches you could use to accomplish this (I'm sure others may come up with more).

Firstly, you can use a setTimeout to delay the second click and perform your validation prior to the first click happening.

Here is an example:

var shouldCancel = false;
//First event
//Without the setTimeout, this event would be triggered first.
$("#button1").click(function (e) {
    setTimeout(function () {
        if (!shouldCancel) {
            alert("test2");
        } // end if
    }, 500);
});
//Second event
$("#button1").click(function (e) {
    //Perform validation checks here...
    alert("test1");
    shouldCancel = true;
    e.stopPropagation();
    e.preventDefault();
});

The other alternative (my preference and less hacky), is to use a "validation" method that performs your check as part of your click.

$("#button2").click(function (e) {
    // ..some operation that makes some check and assigns a value to the "shouldCancel" property below
    $(document).trigger("should-continue", {
        shouldBeCanceled: shouldCancel,
        callback: function () {
            alert("test2");
        }
    });

});

$(document).bind("should-continue", function (e, data) {
    if (data.shouldBeCanceled) {
        e.stopPropagation();
        e.preventDefault();
        return;
    } else {
        alert("test1");
        data.callback(); // Call the method specified by the caller
    } // end if/else
});

Here is a JSFiddle that demonstrates these two methods: http://jsfiddle.net/xDaevax/3ucby35x/

Here are some useful links working with events in JS:

i think the second idea is the best one, i will try that tomorrow at work, and i will update you if something goes wrong, otherwise, thanks! — axel, Aug 20 '14 at 16:50

score 0 · Answer 2 · answered Aug 20 '14 at 14:24

0

Just put the selection statement in your original click handler:

$('.panelTabs li').on('click', function () {
    // ..some operation that makes some check
    if(bActiveRequests === 0){
        // ..some operation that change some tab associated to the list
    }
});

answered Aug 20 '14 at 14:24

vis

494
3
9

`bActiveRequests` is out of scope, I don't like too much the idea of making that variable global. – axel Aug 20 '14 at 16:51

score 0 · Answer 3 · answered Aug 21 '14 at 07:47

Another solution I thought about is to add a class disabled to the <li> element when the operation should be triggered. once this needs to be reactivate it, i will remove that class from the <li>.

And in the general setting i can make a check of that class, if it exists then there it will be stopped the operation.

$('.panelTabs li').on('click', function () {
  if($(this).hasClass('disabled')){
    ev.stopPropagation();
  }
});

Can I anticipate an on click function in jQuery?

3 Answers3