CODEWITHSUNDEEP
jqueryevent-delegation
carter
carter

Reputation: 5432

.on() mouseenter event works but click doesnt work jquery 2

My mind is boggled. Can anyone tell me why this works with 'mouseenter' but not with 'click'?

http://jsfiddle.net/jxUGw/3/

//////THIS DOESNT WORK
$('#view_panel').on('click', 'img.main_image', function(){
    $(this).parent().find('div.image_box').show();
});

$('#view_panel').on('click', 'img.main_image', function(){
    $(this).parent().find('div.image_box').hide();
});


/////THIS WORKS
$('#view_panel').on('mouseenter', 'img.main_image', function(){
    $(this).parent().find('div.image_box').show();
});

$('#view_panel').on('mouseleave', 'img.main_image', function(){
    $(this).parent().find('div.image_box').hide();
});

Upvotes: 1

Views: 162

Answers (2)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

It is not that it's not working, you just call both function when you click.

Try that instead (1 click function):

$('#view_panel').on('click', 'img.main_image', function(){
    $(this).parent().find('div.image_box').toggle();
});

Upvotes: 1

Andy
Andy

Reputation: 8918

The second event being bound is firing immediately after the first one. So the div is being hidden as soon it is shown.

Try using toggle() instead.

Upvotes: 3

Related Questions