Keeping jquery scripts alive after third party ajax

Question

I know there are other posts like this, but I don't know if its appropriate to ask a question on someone else's question. Here's the link where I think I found the answer to my question of what to do: other question. I think the last solution on the page is probably the one to use.

My question that still remains is how to apply this to my scenario. My scripts are all contained within an outer function. It is based on this concept:

jQuery.noConflict();
jQuery(function($) {

    var Engine = {
        utils : {
            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        },
        ui : {
            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        },
        fixes : {
            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        },
        tweaks : {

            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        }
    };


    Engine.utils.functionName();
    Engine.utils.functionName2();

    Engine.ui.functionName();
    Engine.ui.functionName2();

    Engine.fixes.functionName();    
    Engine.fixes.functionName2();   

    Engine.tweaks.functionName();
    Engine.tweaks.functionName2();

});

I'm ultimately trying solve the problem of my scripts not working after an ajax call changes content. The linked question is "jquery : trigger $document.ready (so AJAX code I can't modify is executed)". The answers to that one, especially the last one, seem to be what I am looking for, but I'm not sure how to make that work with my scenario.

Did you visit the link? I've also edited my question to clarify. — Adam Cook, Apr 09 '12 at 18:51
Does the content you are loading thru Ajax contain javascript that you need to run, or is it just that the functions you already have do not work with the loaded content? — adeneo, Apr 09 '12 at 19:17
The second. The content is loaded through a backend I don't have access to. When the content refreshes my jquery no longer works. I'm thinking it's because the Dom is not refreshed with the new content. — Adam Cook, Apr 09 '12 at 19:39
an example of what isn't working might be nice... are they event handlers, or something else? — Patrick Lee Scott, Apr 09 '12 at 19:57
I'm guessing you need to delegate, but it's hard to tell ? As Patrick says, are there event handlers, like click, hover etc. or is there something else that is not working? — adeneo, Apr 09 '12 at 20:13
http://www.lydona.com/products/cremes/caramel-creme is an example page. I have a script called scripts.js that runs on there. You can see what I'm doing. — Adam Cook, Apr 09 '12 at 21:48

Adam Cook · Accepted Answer · 2012-04-18T21:57:27.263

I found the answer using delegation with on().

jQuery.noConflict();
function scriptlist() {
    var $ = jQuery;
    var Engine = {
        utils : {
            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        },
        ui : {
            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        },
        fixes : {
            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        },
        tweaks : {

            functionName : function(){
                // Do stuff in here
            },
            functionName2 : function(){
                // do something else    
            }
        }
    };


    Engine.utils.functionName();
    Engine.utils.functionName2();

    Engine.ui.functionName();
    Engine.ui.functionName2();

    Engine.fixes.functionName();    
    Engine.fixes.functionName2();   

    Engine.tweaks.functionName();
    Engine.tweaks.functionName2();

};

jQuery('body').on('change click.productSubmitInput',function(){
    jQuery.ready(scriptlist());
});
scriptlist();

This way, all my scripts will rebind after a content update instigated by a a change() event or when my button with the class 'productSubmitInput' is clicked.

Keeping jquery scripts alive after third party ajax

1 Answers1