why does the hover and click not always work?


here is <a href="http://jsfiddle.net/wks8s381/" rel="nofollow">my fiddle</a>

Pretty much working perfectly apart from sometimes mouseenter, mouseleave, click function (.item) doesn't always work - and needs to be clicked for it to start working again? why is this - here is my code -

$(document).ready(function () { $('.timelineTile').click(function (evt) { evt.stopPropagation(); $('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').height(0); $(this).toggleClass('clicked'); if(!$('.timelineTile').hasClass("clicked")){ $(this).children('.pull_down_content').height(0); } }); }); $(document).click(function () { $('.timelineTile').removeClass('clicked'); $('.pull_down_content').height(0); $('.inner').stop().css({'display': 'none'}, 300); }); $(document).ready(function () { $('.timelineTile').children('.item').on('mouseenter mouseleave click', function(e) { e.stopPropagation(); if ($(this).parent('.timelineTile').hasClass("clicked")) { if (!$(this).data('clicked')) { var Height = e.type==='mouseenter' ? '90px' : e.type==='click' ? '250px' : '0px'; $(this).siblings('.pull_down_content').stop().animate({'height': Height}, 300); $(this).siblings('.pull_down_content').children('.inner').css({'display': 'block'}, 300); if (e.type==='click') $(this).data('clicked', true); }else{ if (e.type==='click') { $(this).data('clicked', false); $(this).siblings('.pull_down_content').stop().animate({'height': '0px'}, 300); $(this).siblings('.pull_down_content').children('.inner').css({'display': 'none'}, 300); } } } }); });

I'm not sure if its something to do with this?

if(!$('.timelineTile').hasClass("clicked")){ $(this).children('.pull_down_content').height(0); }


Try replacing


with this



Maybe you try to attach events when elements aren't exists (for example if they will be added dynamically by scripts).

Use more modern case 'on' instead of 'click' etc.

$(wrapper).on('click', 'element', function() { ... });

Smth like:

... <div class="wrapper"> <span class="link">Click me</span> </div> ... $('.wrapper').on('click', '.link', function() { ... });

This variant adds events for all elements even if they added dynamically.


  • say I have many divs and each div trigger an event when clicked
  • How to remove button text responsively in JQuery Mobile
  • Stop table row toggle upon clicking link
  • Adding a class to Body in PHP and keeping it with a session
  • javascript function “createCallback” called >50 times when I use addClass/removeClass in Firefox
  • Select more checkbox by value or id
  • Switch color of button on click (and revert color of other buttons)
  • How to limit JQuery selectable-helper's range?
  • setTimeout not delaying function call in $.each
  • Getting undefined response from jQuery AJAX form post
  • Loading dynamic div content with jQuery from a URL
  • Safari blurs strange bugs
  • Invoke click events on two superimposed, non-hierarchical elements
  • How do I remove an element class after success?
  • html table selection with colspan or rowspan
  • clear interval doesn't work
  • Add click event on window, but ignore all links that start with https
  • Clockpicker: How to prevent click on input to open clockpicker
  • Limit the number of visible pages in pagination
  • Open a file from the same package
  • Fading between images
  • AJAX jquery json sending array to php
  • jQuery panel slider opens with button click but won't close
  • Java refreshing second form
  • SVG Error: Permission denied to access property 'someFunction'
  • Onclick or href which is best for opening an link in button
  • jQuery toggle hide on click elsewhere
  • Can't delete or rename original file after resizing
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • D3 get axis values on zoom event
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • How to set/get protobuf's extension field in Go?
  • Menu Color Fade on Hover with Jquery
  • How to show dropdown in excel using jrxml (jasper api)?
  • File upload with ng-file-upload throwing error
  • Acquiring multiple attributes from .xml file in c#
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?