JQuery issues after using load to load external html

Question

I am using the code below to load html into my page:

$(document).ready(function () {

   $('#loadingArea').load('includes/template1.html');

});

It works great but for some reason when I use any query to target any divs belonging to the loaded html file it won't work for example:

template1.html contains:

Button Inside the Template

If I try to use:

$("#mybutton").click(function(){

    alert('Something');        

});

It will not work.

How can I fix this?

Answer 1

learn about event delegation see:

$("body").on('click','#mybutton',function(){

    alert('Something');        

});

Answer 2

You need to delegate the events. Delegate the event by attaching to the nearest static object:

$("#loadingArea").on("click", "#mybutton", function(){
    alert('Something');
});