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