<!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事件，望大佬赐教，感激不尽
4 个解决方案
#1
$('#id2').mouseleave(function(){这种是直接绑定事件的方式，
只能为$('#id2')函数执行时（在你的代码中也就是页面加载时）id属性就已经是id2的元素绑定事件。如果在这之后再把某个元素的id属性设置为id2，元素上也不会有事件。
同样，把已经直接绑定了事件的元素id改成别的，直接绑定的事件也不会解除。
要做到你代码的要求，就要用委托事件的方式
只能为$('#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>
#2
其实你可以同时的直接绑定mouseenter和mouseleave
$('#id1').mouseenter(function(){
$('p').text('change-id');
}).mouseleave(function(){
$('p').text('cmoeback');
})
#3
只按你的代码看，你把事件绑定在了“id1”和“id2”上，而你页面上却没有id2
#4
懂了，也就是绑定事件的时候需要id已经渲染在DOM树上了，之后另外通过JS追加到DOM树上的节点再去绑定事件是没有用的
#1
$('#id2').mouseleave(function(){这种是直接绑定事件的方式，
只能为$('#id2')函数执行时（在你的代码中也就是页面加载时）id属性就已经是id2的元素绑定事件。如果在这之后再把某个元素的id属性设置为id2，元素上也不会有事件。
同样，把已经直接绑定了事件的元素id改成别的，直接绑定的事件也不会解除。
要做到你代码的要求，就要用委托事件的方式
只能为$('#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>
#2
其实你可以同时的直接绑定mouseenter和mouseleave
$('#id1').mouseenter(function(){
$('p').text('change-id');
}).mouseleave(function(){
$('p').text('cmoeback');
})
#3
只按你的代码看，你把事件绑定在了“id1”和“id2”上，而你页面上却没有id2
#4
懂了，也就是绑定事件的时候需要id已经渲染在DOM树上了，之后另外通过JS追加到DOM树上的节点再去绑定事件是没有用的