March 21, 2012

Jquery click event is not fired every time on all LI element of UL tag

Question by Rama Rao M

Hi,

I have created drop down.A div tag contains ul which has list items.Whenever user clicks on the li element,that value has to be updated in the input box.The problem is click event is not fired on some of li elements.In first case, I put 3 LI elements,out of these only top two elements firing event but no last one.In second case, I changed LI elements to 5.Now only first 3 elements firing but not last 2.
Out f 8 elements 5 elements firing,but not last 3 elements. I am really confused with this behavior. What could be the wrong in my code..Here is the link .Can you please help me….

Answer by codef0rmer

The following line in your code causing a problem: (I do not think it is needed as you have $(html).click() event too)

$('.irmNDrdnInput').blur(function(){
    drndValId = 'drdn-val-'+$(this).attr('id').split('-')[2];
    $('#'+drdnValId).slideUp(300);
});

Demo: http://jsfiddle.net/6Kd67/5/

For tab-press, you can track the keyCode inside $('.irmNDrdnInput').keydown() event :

if (event.keyCode === 9) {
    $('.irmNDrdnVal').slideUp(300);
    return false;            
}

Demo: http://jsfiddle.net/6Kd67/7/

Answer by Starx

Why are over complicating this effect? Keep it Short and Simple (KISS)

I created a simple demo for a previously asked question, check it here.

Another demo with slide in effect.


Update

Your blur function is creating problem, since more than one event is being triggered at the same time, specially the $('html').click(), the effect is overlapping. Add a slight delay to get everything working

/*Close value popup of the element which has lost focus*/
$('.irmNDrdnInput').blur(function(){
    drndValId = 'drdn-val-'+$(this).attr('id').split('-')[2];
    $('#'+drdnValId).delay(100).slideUp(300);
});

Working DEMO

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!