javascript - Document level event listeners being duplicated -

i using sammyjs route website, , i'm using file structure, inside of controller/, have 4 main pages. inside, this,

(function() {    var app = sammy.apps.body;        app.get('#/clients', function(context) {      context.render('/view/clients/index.html', function(view) {        $('body').html(view);      });    });        app.get('#/clients/edit', function(context) {      context.render('/view/clients/edit.html', function(view) {        $('body').html(view);                $(document).on('click', '#updateclient', function() {          //do stuff updating client here...        });      });    });  });

with first navigation works fine. html , javascript load , buttons work intended. upon page navigation (i'm using href's handle navigation) page , back, event listeners being duplicated, can seen here (using chrome)

before(first navigation)

after(second navigation)

is there way stop this? understand using $('#idnamehere').on('click', function() {...}); works, not on dynamically generated elements. also, page refresh works delete listeners (sort of obvious). led believe part of sammyjs's way of running, keeps javascript files running in background after navigate away page.

you can move event listener out root, it's set once. since event listener set on document, it'll work fine dynamically added content.

(function() {   var app = sammy.apps.body;    $(document).on('click', '#updateclient', function() {     //do stuff updating client here...   });    app.get('#/clients', function(context) {     context.render('/view/clients/index.html', function(view) {       $('body').html(view);     });   });    app.get('#/clients/edit', function(context) {     context.render('/view/clients/edit.html', function(view) {       $('body').html(view);   }); });