Why i get this $Uncaught TypeError: $(...).on is not a function?

Hi , in my one page HTML ,which i am trying to initialize my F7 app,
and in my code as follow,

on:{
	pageInit: function(e, page){
	  $('input[type="radio"]').on('change click', function(el){
	      var el1 = document.getElementById('ed_total_delivery_cost');
	      el1.innerHTML = el.target.dataset['price'];					
        });
 },

why i keep getting this $Uncaught TypeError: $(…).on is not a function Error ?
And is it because my $ selector is not initialized ?
Can anyone help to give me some advice on it ?
Thanks,
Kalmen

$ change to this.$

try this:

on:{
	pageInit: function(e, page){
var app = page.app;
var $ = page.$;

	  $('input[type="radio"]').on('change click', function(el){
	      var el1 = document.getElementById('ed_total_delivery_cost');
	      el1.innerHTML = el.target.dataset['price'];					
        });
 },