Binden Sie einen Klick in jQuery Mouseenter

Question

Wenn ich klicke, ist bind mehr als 5 klicken Aktion.

Dieser jQuery-Block befindet sich in der mouseenter jquery-Funktion.

Es binden mehr als auf Klick.

Unten ist die ganze Funktion.

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

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

Answer 1

hatte ich Lösung von

Dekel antworten

ich diesen Code geändert machen:

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

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

Um diese: Wo ich ein binden klicken pro MouseEnter- und kann immer noch Tasten

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

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

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

Answer 2

Ihr Problem ist, dass jedes Mal, wenn Sie setzen Sie Ihre Maus über das .parent Element ein- oder ausgeblendet - Sie legen einen neuen click Ereignis-Listener zum #elem Elemente. Wenn Sie das Element mehrere Male halten (und Sie nicht klicken), ist das Ereignis click bereits angehängt und Sie erhalten mehrere "Warnungen". Eine andere Sache zu beachten ist, dass mit mouseover - jedes Mal, wenn Sie zwischen Elementen wechseln, die ineinander übergehen (wie Ihr Beispiel) - dieses Ereignis ist Feuer.

$('.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>