Javascript 当使用此函数时，为什么计算元素之间距离的函数会出错？_Javascript_Php_Jquery_Html_Css

Javascript 当使用此函数时，为什么计算元素之间距离的函数会出错？

javascript php jquery html css

Javascript 当使用此函数时，为什么计算元素之间距离的函数会出错？,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,为什么函数计算class=box\u黑色和底页之间的距离在使用此函数时出错首先，加载page index.php并将页面滚动到顶部，您将看到红色文本，例如：distance 0:106.90625px 然后向下滚动页面，直到看到class=box_黑色，您将看到红色文本，例如：距离0:2.90625px最小值然后按“生成新元素”按钮10 这是我的问题，当用户按下“生成新元素”按钮时，为什么class=box\u黑色和底部页面红色文本之间的距离不会实时改变 index.php <!DOC

为什么函数计算class=box\u黑色和底页之间的距离在使用此函数时出错

首先，加载page index.php并将页面滚动到顶部，您将看到红色文本，例如：distance 0:106.90625px

然后向下滚动页面，直到看到class=box_黑色，您将看到红色文本，例如：距离0:2.90625px最小值

然后按“生成新元素”按钮10

这是我的问题，当用户按下“生成新元素”按钮时，为什么class=box\u黑色和底部页面红色文本之间的距离不会实时改变

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
var counter = 0;
$("button").click(function() {
    $("h2").append("<p>SPACE..............................................</p>")
});
$("h2").on("click", "p.test", function(){
    alert(this.innerText);
});
});
</script>
<h2></h2>
<button>generate new element</button>
<script>
  $(document).ready(function(){
    $('#mySpan').hide();
        $.ajax
        (
            {
                url: 'demo.php',
                type: 'POST',
                data: $('#fid').serialize(),
                cache: false,
                success: function (data) {
                    $('#mySpan').show();
                    $('#mySpan').html(data);
                }
            }
        )
});
</script>
</head>
<form id="fid" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="hidden" name="test" value=""/>
</form>
<span id="mySpan" style=" float: left; "></span>
<div id="element_left"></div>
<div id="element_bottom"></div>

demo.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
#element_bottom{   
    background: #000;
    color: #fff;
    height: 2px;    
    position: fixed;
    bottom: 0;
    width: 100%;
}
#distance_bottom0 {
    z-index: 9999999999999;
    color: red;
    position: fixed;
    top: 30px;
    font-size: 16px;
    font-weight: bold; 
    margin-top: 10px; 
}
</style>
<script type="text/javascript">
(function() {
    var btm = $('#element_bottom'),
        ref = $('#ref_box0'),
        refTop = ref.position().top,
        btmTop = btm.position().top;       
    $('#distance_bottom0 span').text(Math.abs(refTop-btmTop));    
    window.distance_bottom0 = Math.abs(refTop-btmTop);    
    $(window).scroll(function(){
       btmTop = btm.position().top;        
       window.distance_bottom0 = Math.abs(refTop-btmTop);
       $('#distance_bottom0 span').text(Math.abs(refTop-btmTop));    
    });    
})();
</script>
</head>
<div class="box_black" style=" background: #000; width: 50px; height: 50px; float: left; " id="ref_box0"></div>                
<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>     
<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>
<p id="distance_bottom0">distance 0: <span>0</span>px</p>

你有可能写一篇SSCCE吗？另请参见，PHP标记与此相关吗？据我所知，您的PHP页面只是HTML，没有PHP执行。在头上？那太疯狂了，而且是无效的。