<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="id1">
<p>id</p>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script>$('#id1').mouseenter(function(){
$('p').text('change-id');
$('#id1').attr('id','id2');
//alert($('#dsbdo').attr('id'));
});
$('#id2').mouseleave(function(){
$('p').text('cmoeback');
$('#id2').attr('id','id1');
alert($('#id').attr('id'));
})
</script>
</body>
</html>
为什么当鼠标移进div时能够正常触发mouseenter事件，而当鼠标移出时却不能正常触发mouseleave事件，望大佬赐教，感激不尽
只能为$('#id2')函数执行时（在你的代码中也就是页面加载时）id属性就已经是id2的元素绑定事件。如果在这之后再把某个元素的id属性设置为id2，元素上也不会有事件。
同样，把已经直接绑定了事件的元素id改成别的，直接绑定的事件也不会解除。要做到你代码的要求，就要用委托事件的方式<script>
$(document).on("mouseenter", "#id1", function(){
$('p').text('change-id');
$('#id1').attr('id','id2');
//alert($('#dsbdo').attr('id'));
});
$(document).on("mouseleave", "#id2", function(){
$('p').text('cmoeback');
$('#id2').attr('id','id1');
alert($('#id').attr('id'));
})
</script>
$('p').text('change-id');
}).mouseleave(function(){
$('p').text('cmoeback');
})