javascript - 定位具有相同类名的特定 jquery 元素

Question

我有几个动态生成的div，它们共享相同的类名，如果我将鼠标悬停在父级(myDiv)上需要触发一个事件，并且悬停时需要将一个类添加到myDiv(子按钮) )并且一旦我单击父 div(myDiv) 需要取消绑定(bind)悬停操作吗？

<div class="myDiv">
  <div class="myBtn"></div>
</div>
<div class="myDiv">
  <div class="myBtn"></div>
</div>
<div class="myDiv">
  <div class="myBtn"></div>
</div>

尝试了以下方法

$(document).on('click', '.myDiv', function() {
    //some task will goes here  
    $(this).unbind('hover');            
}).hover(function() {
    $(this).find('.myBtn').css('background','#666666');
});

Answer 1

我相信您正在寻找的是.off()功能。

Here是 jsFiddle 链接。

JavaScript:

$(document).on('click', '.myDiv', function() {
  //some task will goes here
  $(this).off();
});

$('.myDiv').hover(function() {
  $(this).find('.myBtn').toggleClass('active');
});

CSS:

.myDiv {
  display: block;
  height: 100px;
  width: 100px;
  background-color: red;
}

.myBtn {
  display: block;
  height: 50px;
  width: 100px;
  background-color: white;
}

.active {
  background-color: gray;
}

我希望这会有所帮助。