65765

why does the hover and click not always work?

Question:

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); }

Answer1:

Try replacing

$('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').‌​height(0);

with this

$('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').‌​height(0).end().find('.item').data('clicked',false);

Answer2:

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.

Recommend

  • 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?