How to organise jquery code and avoid events to fire on every page [closed]

Question

I discoverd my jquery code is a mess, right now it doesnt follow any type of logic build up. I have lots of ajax calls, nested functions, dom manipulations, plugin calls in my main js file.

Lot of calls are fired on every page, what is a no-no, and get the undefined error on a few pages because some functions or calls fire on every page, and thats not supose to.

Example codes

var siteUrl = window.location.protocol+"//"+window.location.host + "/fresh/"
    uid = $('.profile-social').data('connection'), 
    sample = $('.profile-samples').data('sample');

// profile read more
$('div.profile-bio').expander({
    slicePoint: 670,
    expandText: '<i class="icon-chevron-down"></i> Read more',
    userCollapseText: '<i class="icon-chevron-up"></i> Hide Text'
});

// load profile sample works
$('.samples').socialist({
    networks: [
         {name:sample.name ,id: sample.tid}, 
       ],
    isotope:true,
    random:true,
    fields:['source','heading','text','date','image','followers','likes']
})


loadSocial();
// load useres followers and folowings
function loadSocial() {
    $.ajax({
      url: siteUrl+'user/connection/' + uid,
      type: 'get',
      dataType: 'html',
      success: function(data) {
        $(".social-list").html(data);
      },
    });
}

I know this is not a good way, and im not following any pattern to organise my code. Anybody can give me an advice? Because right now its a straight mess, and lot of events fire on every page, and i would like to avoid that

Answer 1

I would advise you to not have all your javascript in one main.js.

I find it best to have the main.js containing only the javascript that I need on all pages. Then I have page specific javascript in line on the page, or in a separate file that only gets loaded by the specific page / pages.