Execute script only for newly added HTML
<p>i am creating this mini-module framework and what i'm trying to do is to reuse a module definition on a dynamically loaded HTML. it's like using the same weather widget script to power two or more weather widgets on screen, one loaded on page load, and the others loaded later. defining the module uses this format.</p>

<pre><code>framework.module.create('module_name',function(){

    //execute when starting the module
    this.init = function(){

        //for example, bind a click handler
        $('button').on('click',function(){
            alert('foo');
        });
    }
});
</code></pre>

<p>the module name and constructor is stored in an array and during page load, executed like</p>

<pre><code>//store
function create(name,fn){
    modules[name] = fn;
}

//execute
function start(){
    //for each module definition stored
    var module =  new modules[name]();
    module.init();
}
</code></pre>

<p>now event handlers are bound to the elements. this works when the module html is already on the page. however, if i try loading another copy of that module's HTML which doesn't have handlers yet, calling <code>start()</code> binds it the handlers, but now doubles the handler for the existing/already initialized HTML. clicking the button on the preloaded HTML now fires click events twice.</p>

<p>i can't do this magic on the module definition. i need to preserve the "constructor/callback function" format. also, i don't want users to do workarounds for this. this has to be done under the framework code.</p>

<p>how do i execute the module script only for the newly added, exactly identical HTML?</p>

<p>or</p>

<p>how do i prevent the script from affecting the already initialized HTML?</p>
