Search code examples
javascriptjqueryeventsonclickstoppropagation

Can I anticipate an on click function in jQuery?

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?

Solution

  • 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: