The version of jQuery used by concrete5 varies with concrete5 versions. In most instances, this makes no difference to how you write code. For example, if you are using short form event handler methods, they are available across all versions of jQuery used by concrete5, so you can just write code like:

$('selector').click( function(ev){
  console.log('Click', ev, this);
});

However, its not as simple if you want a single handler to cover events across multiple elements, and especially not if you are dynamically adding elements that you want the event handler to cover.

In the version of jQuery currently used by concrete5 and for future versions of both concrete5 and jQuery, the on() method is by far the best way to have such flexible event handlers.

$('selector').on('click','subselector', function(ev){
  console.log('Click', ev, this);
});

If you want some jQuery code to work with concrete5.4.x, the version of jQuery provided comes from before the on() method was available. In such ancient jQuery, the live() method is the only way to have an adaptive handler.

$('selector and subselector').live('click', function(ev){
  console.log('Click', ev, this);
});

However, the live() method is now deprecated in jQuery. For more background, see HowTo Attach jQuery event handlers.

If you need to write adaptive event handlers that need to work across multiple versions of concrete5, right back to version 5.4 and before, a solution is to write code that detects the availability of the on() method and sets event handlers accordingly.

if(typeof $.fn.on === 'undefined'){
  $('selector and subselector').live('click', function(ev){
    handle_event(ev, this);
  });
} else {
  $('selector').on('click', 'subselector', function(ev){
    handle_event(ev, this);
  });
}

In this code, if on() is defined, then it is used. If not, then live() is used. The actual handle_event() function can then be used for both methods of attaching the handler.

function handle_event(ev, context){
  console.log('Click', ev, context);
}

However, beware that the context (this) may not be exactly the same, so the handle_event() function may need to double check its context and adapt further.

Read more How-tos by JohntheFish