javascript - Is there a way to do global event binding on dynamic HTML loaded via jQuery .load()? -

i have html page uses jquery .load() pull in html other files. readability purposes.

i ran problem whereby code loaded via .load() not "visible" other javascript loaded later in module because .load() asynchronous. solved in stackoverflow question of mine results, doing .click() binding in .load() callback. s.o. shone through does!

now, have question related.

html:

        <div class="maincontent" style="color:white; overflow-y: auto; position:fixed; top:210px; bottom:60px;">             <div class="linkcontent" id="contentaboutus"        style="display:none"></div>             <div class="linkcontent" id="contentaboutuscompany" style="display:none"></div>             <div class="linkcontent" id="contentaboutusverify"  style="display:none"></div>             <div class="linkcontent" id="contentaboutusself"    style="display:none"></div>             <div class="linkcontent" id="contentaboutushow"     style="display:none"></div>         </div> 

jquery ready() function:

$("#contentaboutus").load("contentaboutus.html"); $("#contentaboutuscompany").load("contentaboutuscompany.html"); $("#contentaboutusverify").load("contentaboutusverify.html"); $("#contentaboutusself").load("contentaboutusself.html", function () { $(".savebutton").click(function () { saveform(); })  }); $("#contentaboutushow").load("contentaboutushow.html"); 

you notice on aboutusself .load(), callback binds click event of ".savebutton" function called saveform(). works perfectly, , answer got previous s.o. question.

as see, ".savebutton" class, , in fact, button on many pages of form; why class , not id.

the question this: not want click() binding on every section contains 1 of these buttons. there way dynamically .load() html, , yet apply click() binding globally instead of doing in .load() callback individually in every case needed?

since loading these inside container, can use that.

$('.maincontent').on('click','.savebutton', function(){      saveform(); }); 

event handlers bound way bind container , "looks within" selector of button. cannot directly bind class button has nothing bind until loaded , in dom.

bind closest container (not document instance) can avoid deep "look within" impact super large dom.

note 1 thing experience here multiple hits sever - i.e. benefit cache of html if in page , hits page once way. being said, dynamic page portions candidate type binding @ container level.

with asp.net mvc instance these can put in partial views , in page prior hitting browser.

you did not ask move style css file , not put in markup - makes markup cleaner , easier modify.