jQuery click event works only after second click

Question

I've click event bind to a class called ".reportfile" as follow.

$('body').on('click','.reportfile',function(e){
    e.preventDefault();
    e.stopPropagation();
    var id=$(this).attr('id');
    if(!$(this).hasClass('brc')) {
         // Perform some action here.
    }
});

Now I'm creating LI element dynamically with ".reportfile" class. Like this,

var inLi=$('<li>');
inLi.addClass('reportfile');
$(containerdiv).append(inLi);

Now when I try to click on the dynamic generated LI elements it only works on second click.

https://jsfiddle.net/mt7km8bz/

There is input box on the top of the UL to filter the list. This is where I'm creating new LI dynamically. LI element in filtered list has to be clicked twice to get it working.

Can you share executable demo/snippet or [JSFiddle](https://jsfiddle.net/) ? May be because you have certain condition in click handler.. — Rayon, Apr 06 '16 at 05:40
becoz the first click that get out of focus on search, then it clicked. that is your li does't recog first click..once the input value changed ,then it reacts the on click... — nisar, Apr 06 '16 at 06:15
Try changing `$('.ul1').find('.reportfile').each(function(index)` to `$('.ul1').find('.reportfile').each(function(title)` and `var title` to `title`, finally, remove this as well `$('.ul2').html('');`. Is this what you want? Also according to css-tricks `e.stopPropagation();` is considered bad practice. https://css-tricks.com/dangers-stopping-event-propagation/ — Ray, Apr 06 '16 at 06:17
@Raymond $('.ul2').html(''); Click event works by removing this line. But the filtered list doesn't get replaced with new data. I also need to ensure filtering function works properly. — Alok Patel, Apr 06 '16 at 06:26
@nisar changing "change paste keyup" to keypress function does the trick. Thanks! — Alok Patel, Apr 06 '16 at 06:28
@Alok, well, take a look at this: https://jsfiddle.net/ray716/x35qj3gm/ — Ray, Apr 06 '16 at 06:29
@nisar, Could got make out the reason of happening so ? Just `input` event is enough though.. — Rayon, Apr 06 '16 at 06:30
@Rayon, Check my fiddle ....You should get it...becoz once the class was created, It's enough to call $('body').on('click','.reportfile'..... — nisar, Apr 06 '16 at 06:39

score 3 · Accepted Answer · answered May 25 '16 at 04:31

The problem was the focus on the input box, on first click input box still have the focus so the click event on list doesn't trigger.

So on the first click it losses focus on the input box and on second click event get triggered.

Changes to following worked for me.

$('body').on('keyup','.searchable',function(){
      // Some code
});

score 1 · Answer 2 · answered Apr 06 '16 at 06:53

1

I guess jQuery click event works only after second click because the focus of the input.So I did a fool way that is trigger LostFocus Event using timer.

setTimeout(function(){
    $('.searchable').blur();
},1500);

This is the code... https://jsfiddle.net/2hkn2jpk/

answered Apr 06 '16 at 06:53

zara.zhao

11
3

Yeah, indeed! It has to do with input focus! – Alok Patel May 25 '16 at 04:32

nisar · Answer 3 · 2016-04-06T06:28:36.090

change this to keypress , Its working. I cheked in fiddle. Jsfiddle

$( ".searchable" ).keypress(function(){
        $('.ul2').html('');
        var value=$(this).val().trim().toLowerCase();
    if(value=="") {
        $('.ul1').show();
        $('.ul2').hide();
    } else {
        $('.ul1').hide();
        $('.ul2').show();
    }
    $('.ul1').find('.reportfile').each(function(index){
            var title=$(this).attr('title').toLowerCase();
        if(title.indexOf(value)>=0) {
                var LIin=$("<li>");
            LIin.addClass('reportfile');
            LIin.text(title);
            $('.ul2').append(LIin);
        }
    });
});

You forgot to add e as the parameter. – Ray Apr 06 '16 at 06:08 — Ray, Apr 06 '16 at 06:08

score 0 · Answer 4 · answered Apr 06 '16 at 06:03

0

try this.....

$(document).on('click','.reportfile',function(e){

    var id=$('.reportfile').attr('id');
    if(!$('.reportfile').hasClass('brc')) {
         // Perform some action here.
    }
});

answered Apr 06 '16 at 06:03

amrit sandhu

128
4

jQuery click event works only after second click

4 Answers4