I have this HTML:
<html>
<head>
<title>Mouseenter and Click combined</title>
</head>
<body>
<a id="linkselector" href="#">Click here</a>
</body>
</html>
This is my jQuery code:
jQuery( document ).ready( function($) {
//This is the click event
$('#linkselector').live('click',(function() {
alert('You are clicked!');
}));
//This is the mouseover event
$('#linkselector').live('mouseenter', (function(evt){
$('<div class="popupx"></div>').appendTo(document.body);
$('.popupx').html('<img src="http://' + $(this).data('id') + '.jpg.to/">');
$('.popupx').css({left: evt.pageX+30, top: evt.pageY-15}).show();
$('.popupx').css('border','0');
$(this).live('mouseleave', (function(){
$('.popupx').hide();
}));
}));
});
And finally my CSS:
.popupx{
position:absolute;
width:30px;
height:30px;
}
.popupx img{
width:30px;
height:30px;
}
When I hover the link, the image correctly displays so its working. The problem is that when I click on it, it does not anymore trigger the click event. However if I remove the mouseenter/hover mechanism. The click event works fine.
How is it possible to have the click event fire when the user mouse over the link? Probably I miss something important in my code. Thanks for any tips.
UPDATE: I have successfully combined the three events in one function but I’m still using LIVE and IF/else because for some reason ON won’t work. Anyway, I have mouseenter and mouseleave working correctly in the logic below. But click still won’t work when mouseenter is activated. Probably I need to find a way that the click event will fire when the hover or mouseenter event is still shown.
$('#linkselector').live('click mouseleave mouseenter',(function(evt) {
if (evt.type === 'click') {
//This is a click event
//This won't fire when the mouseenter or hover is shown
} else if (evt.type === 'mouseenter') {
//This is working nicely
$('<div class="popupx"></div>').appendTo(document.body);
$('.popupx').html('<img src="/image.png">');
$('.popupx').css({left: evt.pageX-60, top: evt.pageY-60}).show();
$('.popupx').css('border','0');
} else if (evt.type === 'mouseleave') {
//This is also working nicely
$('.popupx').remove();
}
}));
Your code works fine in jQuery 1.7.2 & firefox 17.
What is your jQuery version & browser?
I copy & paste your code here:
jsfiddle.net/62Y64/