当ajax post请求调用时，为什么函数计算2个元素之间的距离不起作用？
当我加载页面index.php时，函数计算两个元素之间的距离不起作用。
但当我加载页面test.php时，函数计算两个元素之间的距离效果很好。
加载页面index.php时，如何编辑函数计算两个元素之间距离的代码？
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#mySpan').hide();
$.ajax
(
{
url: 'test.php',
type: 'POST',
data: $('#f1id').serialize(),
cache: false,
success: function (data) {
$('#mySpan').show();
$('#mySpan').html(data);
}
}
)
});
</script>
</head>
<form name="f1" id="f1id" method="post" action="" ENCTYPE = "multipart/form-data">
<input type="hidden" name="test" value=""/>
</form>
<span id="mySpan" style=" float: left; "></span>
test.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
<style type="text/css">
body {
font: 11px helvetica, arial, sans-serif;
text-align: center;
}
#ref_box1 {
left: 50%;
width: 30px;
height: 30px;
position: absolute;
background: #000;
}
#element_bottom{
background: #000;
color: #fff;
height: 2px;
/* margin: -25px 0 0 -25px; */
position: fixed;
bottom: 0;
width: 100%;
}
#distance_bottom1 {
position: fixed;
top: 30px;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
</style>
<script type="text/javascript">
$(window).load(function(){
(function() {
var btm = $('#element_bottom'),
ref = $('#ref_box1'),
refTop = ref.position().top,
btmTop = btm.position().top;
$('#distance_bottom1 span').text(Math.abs(refTop-btmTop));
window.distance_bottom1 = Math.abs(refTop-btmTop);
$(window).scroll(function(){
btmTop = btm.position().top;
window.distance_bottom1 = Math.abs(refTop-btmTop);
$('#distance_bottom1 span').text(Math.abs(refTop-btmTop));
});
})();
});
</script>
<p id="distance_bottom1">distance 1: <span>0</span>px</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="ref_box1"></span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="element_bottom"></div>
使用ajax发布到php页面时，没有窗口加载事件。只要去掉window.load事件，它就会正常工作。
删除：
$(window).load(function(){
和
});