How to unbind or turn off all jquery function?

Question

I have constructed an app with push state. Everything is working fine. However in some instances my jquery function are fireing multiple times. That is because when I call push state I bind the particular js file for each page I call. Which means that the same js functions are binded many times to the html while I surf in my page.

Tip: I am using documen.on in my jquery funciton because I need my function to get bound to the dynamical printed HTML through Ajax.

I tried to use off in the push state before printing with no success!

Here is my code:

var requests = [];

        function replacePage(url) {

            var loading = '<div class="push-load"></div>'
            $('.content').fadeOut(200);
            $('.container').append(loading);

            $.each( requests, function( i, v ){
                v.abort();
            });

            requests.push( $.ajax({                     
                    type: "GET",
                    url: url,
                    dataType: "html",
                    success: function(data){            

                        var dom = $(data);
                        //var title = dom.filter('title').text();
                        var html = dom.find('.content').html();
                        //alert(html);
                        //alert("OK");
                        //$('title').text(title);
                        $('a').off();
                        $('.push-load').remove();                       
                        $('.content').html(html).fadeIn(200);
                        //console.log(data);

                        $('.page-loader').hide();
                        $('.load-a').fadeIn(300);                       
                    }
                })
            );
        }

        $(window).bind('popstate', function(){
            replacePage(location.pathname);
        }); 

Thanks in advance!

Answer 1

Try this,

 var requests = [];

   function replacePage(url) {
       var obj = $(this);
       obj.unbind("click", replacePage); //unbind to prevent ajax multiple request
       var loading = '<div class="push-load"></div>';
        $('.content').fadeOut(200);
        $('.container').append(loading);
       $.each(requests, function (i, v) {
           v.abort();
       });
       requests.push(
       $.ajax({
           type: "GET",
           url: url,
           dataType: "html",
           success: function (data) {
               var dom = $(data);
                    //var title = dom.filter('title').text();
                    var html = dom.find('.content').html();
                    //alert(html);
                    //alert("OK");
                    //$('title').text(title);
                obj.bind("click", replacePage); // binding after successfulurl ajax request
                 $('.push-load').remove();                       
                    $('.content').html(html).fadeIn(200);
                    //console.log(data);

                    $('.page-loader').hide();
                    $('.load-a').fadeIn(300);    
            }
       }));
   }

Hope this helps,Thank you

Answer 2

simple bind new function with blank code

$( "#id" ).bind( "click", function() {
//blank
});

or

used

 $('#id').unbind();