Jquery绑定事件失效

在学习Jquery事件的时候发现了一下问题：最初的demo为：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<link rel="stylesheet" type="text/css" href="easyui.css">
	<link rel="stylesheet" type="text/css" href="icon.css">
	<script type="text/javascript" src="..\JQuery-1.9.1\jquery-1.9.1.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$('#mSpan').mousedown(function(){
   			 alert('触发指定事件')
			})
	</script>
</head>
<body>
	<input class="easyui-datebox">
	<div id="dlg" class="easyui-dialog" title="Basic Dialog" closed="true" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
		The dialog content.
	</div>
	<span id="mSpan">淡入淡出效果</span>
	<button id="mBtn" >点击实现淡入淡出效果</button>
</body>
</html>

在这里会发现当鼠标滑动过“mSpan”的标签时候，并未触发事件，后来发现，原因是在浏览器加载该页面时，还未加载到下面的"mSpan"标签时就为该标签绑定了事件，导致了绑定事件失效的错误，修改后代码为：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<link rel="stylesheet" type="text/css" href="easyui.css">
	<link rel="stylesheet" type="text/css" href="icon.css">
	<script type="text/javascript" src="..\JQuery-1.9.1\jquery-1.9.1.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	
	</script>
</head>
<body>
	<input class="easyui-datebox">
	<div id="dlg" class="easyui-dialog" title="Basic Dialog" closed="true" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
		The dialog content.
	</div>
	<span id="mSpan">淡入淡出效果</span>
	<button id="mBtn" >点击实现淡入淡出效果</button>
</body>
	<script type="text/javascript">
		$('#mSpan').mouseover(function(){
   			 alert('触发指定事件')
			})
	</script>
</html>

这样就能绑定成功了

原文链接：https://blog.csdn.net/draven1122/article/details/52490878