Я думаю, что ваша основная проблема связана с загрузкой всей HTML-страницы, <html>, <head> и всего в ваш div. Если бы это работало буквально, вы бы получили такую структуру страницы после загрузки:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#loadStuffHere').load('example1b.html');
});
</script>
</head>
<body>
<div id="loadStuffHere"><html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
alert("This code executes in Chrome but not Safari.");
});
});
</script>
</head>
<body>
<p id="test">This is what is being loaded</p>
</body>
</html></div>
</body>
</html>
... это явно недопустимый HTML-документ, содержащий несколько элементов <html>, <body> и <head>.
load() обычно используется для загрузки фрагмента HTML в элемент вашей страницы, так что в итоге вы получите измененную страницу, которая по-прежнему действительна в целом для HTML.
Браузеры, как правило, имеют некоторую защиту от попадания недействительных документов при загрузке HTML на страницу, точно так же, как они анализируют плохой HTML на страницах, чтобы извлечь из них максимум пользы.
В этом случае, я предполагаю, что Safari может обработать вашу попытку разбить макет на страницу иначе, чем в Chrome - возможно, например, что он просто игнорирует <script> в разделе <head>, потому что это через секунду <head>, и он уже видел один из них.
Помните, что <script> элементы не обязательно должны быть в <head> HTML-документах; они также могут быть добавлены в любое место на <body> страницы.
Наконец, вам также не нужно загружать jQuery в загруженный фрагмент - вы вставляете свой код в страницу, на которой уже был загружен jQuery, так что ваш загруженный скрипт в любом случае будет иметь к нему доступ.