Search code examples
javascriptjqueryajaxconsolidation

jQuery + Javascript: Consolidate duplicate functions between document.ready and ajax load


I am using the ajaxify.js plugin https://github.com/browserstate/ajaxify to load content dynamically.

I have a number of click functions that I bind on document ready, but have to additionally put those functions inside of my ajax load function to re-bind the click events to the newly added content. I had tried using a single set of live functions previously but they didn't work.

Anyway I have the following code twice, once inside of a document.ready(function(){ }) and once again inside of ajaxify.js after the content loads.

I know it's superfluous, but I'm not sure of how to go about writing the functions just once so I can "include" them elsewhere. How can I optimize these functions so I can consolidate them and use them over again in an efficient manner?

Thank you!

        var $filterclear = $('.filters .filter-clear'),
            filtercount = $filterclear.length,
            $searchedfor = $('.searched-for'),
            is_search = $searchedfor.length;

        $filterclear.bind('click', function(){
            var $me = $(this);

            if(filtercount == 3) {
                $('.clear-all.filter-clear').addClass('filter-out').fadeOut('fast');
                $(this).addClass('filter-out').fadeOut('fast');
            } else {
                $(this).addClass('filter-out').fadeOut('fast');
            }

            if($me.hasClass('clear-all') || filtercount == 1) {
                $filterclear.addClass('filter-out').fadeOut('fast');
                if(is_search !== 0) {
                    $('.filters').fadeOut();
                }
            }
        });     

        $('.tag.remove-term').bind('click', function(){
            var $me = $(this),
                mytext = $me.text(),
                $myfilter = $('.filters .filter-clear:contains("'+ mytext +'")');

            if(filtercount == 3) {
                $('.clear-all.filter-clear').addClass('filter-out').fadeOut('fast');
                $myfilter.addClass('filter-out').fadeOut('fast');
            } else {
                $myfilter.addClass('filter-out').fadeOut('fast');
            }
        }); 

        $searchedfor.find('.filter-clear').bind('click',function(){
            $searchedfor.fadeOut();
        }); 

Solution

  • Defining a new function should work (I didn't test it):

    var $filterclear = $('.filters .filter-clear'),
        filtercount = $filterclear.length,
        $searchedfor = $('.searched-for'),
        is_search = $searchedfor.length;
    
    var doSomething($myfilter) {
        if(filtercount == 3) {
            $('.clear-all.filter-clear').addClass('filter-out').fadeOut('fast');
        }
        $myfilter.addClass('filter-out').fadeOut('fast');
    };
    
    $filterclear.bind('click', function() {
        var $me = $(this);
    
        doSomething($me);
    
        if($me.hasClass('clear-all') || filtercount == 1) {
            $filterclear.addClass('filter-out').fadeOut('fast');
            if(is_search !== 0) {
                $('.filters').fadeOut();
            }
        }
    });
    
    $('.tag.remove-term').bind('click', function(){
        var $me = $(this),
            mytext = $me.text(),
            $myfilter = $('.filters .filter-clear:contains("'+ mytext +'")');
    
        doSomething($me);
    }); 
    
    $searchedfor.find('.filter-clear').bind('click',function(){
        $searchedfor.fadeOut();
    });