Question

I have an app running mostly on Ajax. Whenever I update content I run a page specific binder to initiate/re-initiate functionalities for elements that may have been replaced.

Currently I’m doing this like so:

 // pagebinder
 var bindResults = function( page ){
    // element
    var swipesOnPage = page.find('.photoswipeable');

    if ( swipesOnPage.length > 0 && swipesOnPage.jqmData('bound') != true) {
        swipesOnPage
            .jqmData('bound', true )
            .on('click', '.singleLoader', function(e){
                // do somethinbg
            })
            .on('click', '.selector', function(e){
                // do something else
            });
       }
    }

So I’m checking if an element is on the page (may have been removed/added) and if an element is found and is not jqmData(bound), I’m setting bindings.

This works ok. but I’m wondering if this is the best way to do this, so

Question:
How to best manage element bindings for multiple elements when using an Ajax powered application?

Answer 1

Seeing that you’re allready using the selector-parameter for on, why not move the whole thing up to the level of body then. This way you should not have to rebind anything.

This will probably result in more dom-traversal, but if the structure isn’t too deeply nested, it shouldn’t be much of a problem.