Changing order of operations between jQuery .on() and function

[csdude55]

I have this:

// HTML
<button class="button"
 onClick="if (checker()) console.log('returned')">
  Go
</button>

// In a separate JavaScript .JS
$('.button').on('click', function(e) {
 console.log('onclick');
});

function checker() {
 console.log('function');
 return true;
}

When you click the button, the results are:

function
returned
onclick

But I want .on() to run BEFORE checker(), making the results:

onclick
function
returned

In this case, the .on() function is universal to all .button, but checker() is unique to each form. So I can't just move the if (checker())... to the jQuery function.

Any suggestions on changing the order of operations here?

[coothead]

Hi there csdude55,

bearing in mind that I know nothing about jQuery,
here is how I would do it in Vanilla JavaScript...

HTML

 <button class="button">Go</button>
 <button class="button">Go 1</button>
 <button class="button">Go 2</button>

script

<script>
(function( d ) {
 'use strict';
 var but=d.querySelectorAll( '.button' );
 for ( var c=0; c < but.length; c ++ ){
  but[c].addEventListener( 'click',
function(e){
 console.log( 'onclick');
if ( checker() ) {
 console.log( 'returned' );
 };
 },false);
}
function checker() {
 console.log( 'function' );
 return true;
 }
}( document ));
</script>

coothead

[csdude55]

Your script is sort of emulating jQuery... or more accurately, jQuery is emulating your script. It's my understanding that jQuery is really just a library that's supposed to make JavaScript simpler by taking care of things like browser-compatibility for you.

The only reason I began using it is because I installed a third-party app that needed it. And once it's loaded on every page, anyway, then I might as well embrace it.

In my script here, though, I have the .on() function running on every button through a javascript.js file that's loaded on every page. This has a huge advantage in that it loads once, then it's always in the cache and doesn't affect load time beyond that first time.

The only way that I could do what you described, though, would be to define every <button onClick="whatever()"> within that same file. Which would defeat the purpose, creating an unnecessarily larger javascript.js file since they're all unique and only used the one time.

The solution I'm coming up with is more complicated than I wanted, but it works:

// Inline on the HTML page
<script>
function checker() {
 console.log('function');
}
</script>

// HTML
<button class="button" data-callback="checker">
 Go
</button>

// In a separate JavaScript .JS
$('.button').on('click', function(e) {
 console.log('onclick');

 if (typeof window[$(this).data('callback')] == 'function')
  window[$(this).data('callback')]();
});

I would still have to create a function on the page instead of having it inline with onClick, but I would simply define the name of the function with "data-callback".