CSS/JS not working on content loaded by Ajax

[boebi]

So I wrote a very simple ajax function and use that to load another html page into a specific div. Loading works perfectly.

The problem comes with css/javascript on the loaded content. Css included in my root file does not get applied to the extra content and none of the javascript works.

If I simply add the content of the extra page into my root file, everything works, but it breaks with ajax.

I already tried including some seperate css/js in that other html page but that doesn't work either.

I want to use css for obvious reasons and javascript to trigger other javascript functions. I mostly use Jquery but no javascript whatsoever works on the ajax content.

I've done a lot searching but just can't figure this one out, I hope someone here might know the answer.

My ajax function:

function ajax(page, location){
   var ajaxRequest;
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        ajaxRequest=new XMLHttpRequest();
    }else{// code for IE6, IE5
        ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById(location).innerHTML = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", page, true);
    ajaxRequest.send(null); 
}

My extra html (I have tried with and without the html/head/body tags, nothing makes a difference):

<img src="img/map.jpg" usemap="#map" />
<map name="map">
<area shape="polygon" coords="106,127,140,94,188,67,222,105,182,141" title="Area 1" class="Tooltip" id="button_map_area1" >
</map>

This is the javascript I want executed (tried with .on and .click):

$("#button_map_area1").on("click", function(event){
	console.log("test");
    	$('#popup_box').show();	
	});

 

[legacy]

this may take a reply or two to figure but I have some suggestions and questions. so your js references an id called button_map_area1 but I done see that code anywhere. this somewhat reminds me of working with code thru frames which is where my suggestion comes from. its possible that your code of js is loaded before ajax content is and because of that when js loads up it says don't see it so forget it. so either one. load your js statement after your ajax content ie onLoad this can be added to a division like you would a body tag but you would want it inside the ajax content. I have a few other possible ideas. let me know.

 

[Zubair1]

This may be old, but i wanted to post the solution in case any one else stumbles upon it.

The solution was very close to what you were doing, see below:

$("map").on("click", "#button_map_area1", function(event){
	console.log("test");
    	$('#popup_box').show();	
});

You had to use the "on" method as delegate to bind it, or if you were using older version of jquery (prior to 1.9) then you could have also just used the "live" method instead of "on".