javascript - JS for different dynamically loaded content in a fully ajaxed website -

this updated post explain problem in better way improved concept code (based on answers given here far)

i try realize completly ajaxed website. got problems multiple binded events.

this basic html:

<header id="navigation">     <ul>         <li class="red" data-type="cars">get cars</li>         <li class="red" data-type="vegetables">get vegetables</li>     </ul> </header> <div id="anything">     <section id="dymanic-content"></section> </div> 

the navigation been created dynamically (as content of #navigation can replaced navigation), binding nav-elements this:

$('#navigation').off('click', '.red').on('click', '.red', function() {      var type = $(this).attr('data-type');     var data = { 'param': 'content', 'type': type };     ajaxsend(data); }); 

the content of site beeing loaded dynamically. example there 2 different content:

1:

<div id="vegetables">here informations vegetables: <button>anything</button></div> 

2:

<div id="cars"><img src="car.jpg"></div> 

while loading content, load specific js-file, has bindings needed, type of content. loading-script looks this:

var ajaxsend = function(data) {     $.ajax({ url: "script.php", type: "post", data: data, datatype: "json" })     .done(function( json ) {         if (json.logged === false) { login(ajaxsend, data); }         else {             $.getscript( 'js/' + json.file + '.js' )             .done(function( script, textstatus ) {                  $('#result').html(json.antwort);             });         }     }); } 

as pass parameter type of results need (i.e. vegetables or cars), result shown in #result. files cars.js or vegetables.js loaded.

so problem avoid multiple event bindings. how i'm doing it:

cars.js:

$('#result').off('mouseover', 'img').on('mouseover', 'img', function () {      // }); 

vegetables.js:

$('#result').off('click', 'button').on('click', 'button', function () {      // }); 

is proper way? think workaround use off(). appreciate improvements!

furthermore don't know if there problem, if user clicks on navigation multiple times: in case js-files loaded multiple times, aren't they? there multiple bindings concept?

cars.js:

    $('#result').off('mouseover', 'img').on('mouseover', 'img', function () {          //     }); 

vegetabels.js:

    $('#result').off('click', 'button').on('click', 'button', function () {          //     }); 

i not sure, but, if user first click cars type on nav, ('mouseover', 'img') listeners deregister , register again, right? when user click vegetables type on nav ('click', 'button') - deregistered (but!!! 'mouseover', 'img' - kept!!! ), , if user clicks type nav script have no ('mouseover', 'img') listener content have img - there illegal listener content occurs (from pre previous action).

so, need clear registered #result listeners before start loading new content , script, maybe:

    var ajaxsend = function(data) {         $.ajax({ url: "script.php", type: "post", data: data, datatype: "json" })         .done(function( json ) {             if (json.logged === false) { login(ajaxsend, data); }             else {                 $('#result').off();                 $.getscript( 'js/' + json.file + '.js' )                 .done(function( script, textstatus ) {                      $('#result').html(json.antwort);                 });             }         });     } 

or

cars.js:

    $('#result').off().on('mouseover', 'img', function () {          //     }); 

vegetabels.js:

    $('#result').off().on('click', 'button', function () {          //     }); 

---

edit: loading scripts multiple times. didn't find clear answer, , think browser depend , jquery implementation , possible each time new script created new script created if created earlier, there 2 disadvantages:

1. repeated loads of same script form server, if not browser nor jquery didn't cache it
2. flooding dom anp browser's interpreter scripts

but, depending on jquery documentation.

caching responses

by default, $.getscript() sets cache setting false. appends timestamped query parameter request url ensure browser downloads script each time requested. can override feature setting cache property globally using $.ajaxsetup()

---

$.ajaxsetup({ cache: true });

you may rely on jquery cache (there option cache scripts), or implement own, ex.:

    var scriptcache = [];     function loadscript(scriptname, cb){       if (scriptcache[scriptname]) {         jquery.globaleval(scriptcache[scriptname]);         cb();       } else {         $.getscript( scriptname )         .done(function( script, textstatus ) {            scriptcache[scriptname] = script;           //$('#result').html(json.antwort);           cb();         });       }     }