javascript - Targetting specific jquery element which have identical class names -

i have several divs generating dynamically share same class names, if hover on parent(mydiv) need trigger event , on hover need add class mydiv(child button) , once clicked on parent div(mydiv) need unbind hover action?

<div class="mydiv">   <div class="mybtn"></div> </div> <div class="mydiv">   <div class="mybtn"></div> </div> <div class="mydiv">   <div class="mybtn"></div> </div> 

tried in below way

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

i believe looking .off() function.

here jsfiddle link.

javascript:

$(document).on('click', '.mydiv', function() {   //some task 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; } 

i hope helps.