javascript - 网页中的SVG元素无法绑定jQuery事件？-PHP中文网问答

目的

鼠标滑过SVG元素时SVG随机伸缩，后恢复原状（各100ms）

实现代码

<style>
p{
    transform: rotate(180deg);//旋转外层p 180°使SVG伸缩方向上下颠倒
    transform-origin: 50% 50%;
    display: inline-block;
}

g.rect_group rect{
    transition: all 0.1s ease;//定义SVG变换时间
}
</style>
<body>
<p>
    <svg height="300" width="300">
        <g class="rect_group" fill="#B9D6E8">//SVG组
            <rect height="100" width="20"/>
            <rect x="25" height="100" width="20"/>
            <rect x="50" height="100" width="20"/>
            <rect x="75" height="100" width="20"/>
            <rect x="100" height="100" width="20"/>
        </g>
      Sorry, your browser does not support inline SVG.
    </svg>
<p>
 <script type="text/javascript">
     $(document).ready(function(){
         var randomHeight=function($ele){
             $ele.data("this_height",$ele.attr("height"));//写入原高度到元素的.data对象
             $ele.attr("height",Math.floor((Math.random()+0.5)*parseInt($ele.data("this_height"))));//随机伸长/缩短
             setTimeout(function(){
                 $ele.attr("height",$ele.data("this_height"));
             },100);//100ms后恢复原状
         }
         $(".rect_group rect").on("mouseover",function(){//注册时间
             randomHeight($(this));
         });
     })
 </script>
</body>

问题

这段代码在本地实现得很好，但搬到服务器上就无法绑定，元素的event listener也为空，求解？