Correct place/method for on click event handlers

Questions
1

I am having various nightmares trying to get some ‘on click’ type events to function as I hope. Problems include multiple firing, or not firing at all. Have different problems with different solutions, so I wonder if I could just ask whether there is a ‘correct’ answer before I try and explain what happens in different scenarios (I’ve also confused myself now trying to work it out!) I think I’ve tried all the options I’ve put below. Many thanks for correct direction or alternative suggestions.

The circumstance is having elements with a particular class, of which there may be multiple on a single page, and where there may be multiple pages in the DOM containing that class (including the same page loaded more than once). edit: the contents of the page with the element needing processing will mostly have been ajax loaded (as per page-a2 below).

Examples of how I am using them include designating something for processing in a function such as: an external link, a phone number to process, scrolling to a point on a page.

General structure:

#app
  .statusbar
  .view.view-main
    .page
      .page-content

My uses within the html page:

Tel: < span class="badge link call-num-nr" data-num="01200000000">01200 000000< /span>

JS:

var $$ = Dom7;
var app = new Framework7({
    root: '#app',
    clicks: {
        externalLinks: '.external',
    },
    on: {
        routerAjaxStart: function(xhr){ app.preloader.show(); },
        routerAjaxComplete: function(xhr){ app.preloader.hide(); },
    },
    routes: routes,
});

var mainView = app.views.create('.view-main', {
    stackPages: 'true',
});

document.addEventListener('deviceready', function () {
	window.open = cordova.InAppBrowser.open;
}, false); 

$$(document).on('page:init', function (e) {
	var page = e.detail;
	
	if (page.name === 'page-a') {
	   // OPTION A
	}

	if (page.name === 'page-a2') {
	   app.request.get(filename, function (data) {
           $$('.sop-block').html(data);

           // OPTION A
        });

	}

	if (page.name === 'page-b') {
	   // OPTION A
	}
	// OPTION B
});
// OPTION C

  1. Is my best location to put the handler for the on click event A (multiple for different pages), B, or C? (I don’t need them off the index page)

  2. Which is the best way of doing it:



$$(document).on('click', '.call-num-nr', function () {
    calltelnr(this.dataset.num);
});

OR

$$('.call-num-nr').on('click', function () {
   calltelnr(this.dataset.num);
});
2

I think I’ve realised that a crucial part of this problem is that the html containing the element I am trying to handle clicks on is being loaded with an ajax call. I’ve tested all options again and got a more consistent answer. (maybe I was mixing with non-ajax sometimes).

Option C (outside of the page:init event), and using the $$(document).on(‘click’, '.element, … live handler.

With A+B, you either get multiple events using the live handler (extra one for each page:init that has happened), or doesn’t work at all with the normal event handler, I assume because the ajax page hasn’t actually loaded at the point that the handler command is activated.

3

I’ve found that I can move the on click handler to inside the page:init event, if I add .off. Both seem to work, is either preferred for any reason?

$$(document).off('click', '.call-num-nr').on('click', '.call-num-nr', function () {
    calltelnr(this.dataset.num);
});
4

The best way is to use router component where you can keep all Page related event handlers into that page file.

With such option having one handler for all pages you can get into lots of ifs in the future