jQuery global/local event execution order

Question

I have a panel widget with a button. Clicking the button should execute some global actions related to all such widgets and after that execute some local actions related to this widget instance only. Global actions are binded in a separate javascript file by CSS class like this:

var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
        });

        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();

jQuery(document).ready(function() 
{
    App.init();
});

And in the html file local script is like this:

$("#widgetBtn1234").click(function (e)
{
    // do smth local
});

Currently local script is executed first and global only after while I want it to be the opposite. I tried to wrap local one also with document.ready and have it run after global but that doesn't seem to change the execution order. Is there any decent way to arrange global and local jQuery bindings to the same element?

Personally I wouldn't write code where the order of different event handlers matter. If the order is important, that means the code must be related to each other, and should probably be being triggered by one handler. Independent event handlers suggests independent code. — James Thorpe
– James Thorpe, Commented Jan 7, 2016 at 13:02
Totally agree. I tried to generalize the question, however the actual problem is a bit tricky. Global code suppose to change the size of the panel and local one suppose to re-arrange the items inside etc. So technically local code should react on different event - div resize but since there is no such thing (easily done at least) I thought I could chain those behind the same button click. — ollit
– ollit, Commented Jan 7, 2016 at 13:25

jperezov · Accepted Answer · 2016-01-07 20:34:29Z

1

The problem you're having comes from using jQuery's .ready() function to initialize App, while you seem to have no such wrapper in your local code. Try the following instead:

var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
        });

        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();

$(function() 
{
    App.init();
});

Then in your local JS:

$(function() {
    $("#widgetBtn1234").click(function (e)
    {
        // do smth local
    });
});

Note that $(function(){}) can be used as shorthand for $(document).ready(function(){});. Also, make sure your JS file is located before your local JS, as javascript runs sequentially.

Alternatively, you can use setTimeout() to ensure everything's loaded properly:

(function executeOnReady() {
    setTimeout(function() {
        // Set App.isInitialized = true in your App.init() function
        if (App.isInitialized) runLocalJs();
        // App.init() hasn't been called yet, so re-run this function
        else executeOnReady();
    }, 500);
})();
function runLocalJs() {
    $("#widgetBtn1234").click(function (e)
    {
        // do smth local
    });
};

answered Jan 7, 2016 at 20:34

jperezov

3,1912 gold badges25 silver badges37 bronze badges

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

3 Comments

ollit Over a year ago

yes, I mentioned I tried wrapping local to .ready too already but weird thing, they seem to be run properly sequentially but click event is still handled in the opposite order. I added console.log printouts in both global and local .ready inits and they are printed in the right order global first then local. But similar printouts on click come wrong, local first. That got me thinking that is there something in jQuery that would prefer direct div reference by id to the more common one like by class reference, no matter the binding order.

ollit Over a year ago

OK, sorry it was my mistake eventually. Global code was binding to upper element with path to the widget button and that seems to matter to the order jQuery is executing. $(".widgetBtn").click(function (e) apparently has precedence over $('.widget').on('click', '.widgetBtn', function (e) even if the latter is binded first. Didn't think that this would matter.

Nik Markin Over a year ago

@ollit my solution would work regardless of the order and also provides consequential run after the asyncronous global handler (I guess it's not the case, ok). Anyway, just as an addition, I also would refactor the App declaration so it would be an instance of the App class, to be able to use return this and make it more maintainable. And also, regarding the answer - why just not to implement onload method for App class and use it with one line App.onload = onAppLoad; instead of rechecking init flag every 500 ms? And, btw, runLocalJs is more like initLocalClickHandlers, right?

acolchagoff · Accepted Answer · 2016-01-07 20:29:17Z

0

How about this instead:

var widget = $("#widgetBtn1234").get(0);//get the vanilla dom element
var globalHandler = widget.onclick; //save old click handler

// clobber the old handler with a new handler, that calls the old handler when it's done
widget.onclick = function(e){
  //do smth global by calling stored handler
  globalHandler(e);

  //afterward do smth local   
};

There might be a more jqueryish way to write this, but I hope the concept works for you.

-------VVVV----keeping old answer for posterity----VVVV--------

Why not something like this?

    var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
            if(this.id === 'widgetBtn1234'){
               //do specific things for this one
            }
        });

        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();

Please excuse any syntax errors I might have made as I haven't actually tested this code.

edited Jan 7, 2016 at 20:29

answered Jan 7, 2016 at 15:20

acolchagoff

1,9784 gold badges20 silver badges36 bronze badges

4 Comments

ollit Over a year ago

This is exactly what I try to avoid. Global code suppose to be common and shared among different projects, kind of a library. I was thinking about something like this but other way around, calling global code from local file. But not sure how to deal with jQuery bindings in global then.

acolchagoff Over a year ago

Ah, I think I understand your reasoning for keeping things separate now, I think I have a different idea for a solution.

acolchagoff Over a year ago

I Edited the answer with a different method.

ollit Over a year ago

Thanks, actually idea of storing event handlers seems interesting. I found similar solutions here. Might be helpful for some tricky cases.

Nik Markin · Accepted Answer · 2016-08-01 11:44:34Z

0

Check out my simple JQ extension I created on jsbin.

http://jsbin.com/telofesevo/edit?js,console,output

It allows to call consequentially all defined personal click handlers after a global one, handle missed handlers case if necessary and easily reset all personal handlers.

edited Aug 1, 2016 at 11:44

answered Jan 7, 2016 at 19:40

Nik Markin

9911 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery global/local event execution order

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related