Jquery 如何解决mouseenter与mouseleave事件冲突

dsbd 2017-07-14 10:08:31



<!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事件，望大佬赐教，感激不尽

...全文

458 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

dsbd 2017-08-07

打赏
举报

懂了，也就是绑定事件的时候需要id已经渲染在DOM树上了，之后另外通过JS追加到DOM树上的节点再去绑定事件是没有用的

张运领 2017-07-16

打赏
举报

只按你的代码看，你把事件绑定在了“id1”和“id2”上，而你页面上却没有id2

天际的海浪 2017-07-15

打赏
举报

其实你可以同时的直接绑定mouseenter和mouseleave



$('#id1').mouseenter(function(){
  $('p').text('change-id');
}).mouseleave(function(){
  $('p').text('cmoeback');
})

天际的海浪 2017-07-15

打赏
举报

$('#id2').mouseleave(function(){这种是直接绑定事件的方式，只能为$('#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>