Question

当我点击它时，绑定超过5次点击操作。

这个jQuery块在mouseenter jquery函数中。

它比点击更多地绑定。

以下是整个功能。

 $('.parent').mouseover(function () {
    $('#elem').show();
    $('#elem').on('click', function (event) {
        alert('edit');
    });

    $(this).mouseleave(function () {
        $('#elem').hide();
    });
});

Answer 1

您的问题是，每次将鼠标放在.parent元素上时，都会将新的click事件侦听器附加到#elem元素。如果您多次悬停该元素（并且未单击），则已附加click事件，因此您将获得多个“警报”。需要注意的另一件事是mouseover - 每次你在一个内部的元素之间“切换”（就像你的例子） - 那个事件就是火。

$('.parent').mouseover(function () {
  console.log('mouseover fired for .parent');
    $('#elem').show();
    $('#elem').on('click', function (event) {
        console.log('#elem clicked');
    });

    $(this).mouseleave(function () {
        $('#elem').hide();
    });
});

$('.parent1').click('#elem1', function(event) {
  console.log('#elem1 clicked');
});

$('.parent1').mouseover(function () {
  $('#elem1').show();
});

$('.parent1').mouseleave(function () {
  $('#elem1').hide();
});

.parent, .parent1 { border: 1px solid red; width: 50px; height: 50px; margin: 25px; padding: 25px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div id="elem">
    123
  </div>
</div>

<div class="parent1">
  <div id="elem1">
    123
  </div>
</div>

Answer 2

我从

制作解决方案

德克尔回答

我更改了此代码：

 $('.parent').mouseenter(function () {
    $('#elem').show();
    $('#elem').on('click', function (event) {
        alert('edit');
        setTimeout(function () {
            $('#elem').unbind( "click" );
        }, 100);
    });

    $(this).mouseleave(function () {
        $('#elem').hide();
    });
});

对于这一个：我在每个鼠标中心绑定一次点击，仍然可以显示或隐藏按钮

 $('.parent').one('mouseenter', function () {
    $('#elem').click(function (event) {
        alert('edit');
    });
}); 

 $('.parent').mouseenter(function () {
    $('#elem').show();

    $(this).mouseleave(function () {
        $('#elem').hide();
    });
});

在jQuery mouseenter中单击一下

2 个答案: