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 ? May be because you have certain condition in click handler.. — Rayon
– Rayon, Commented Apr 6, 2016 at 5: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
– nisar, Commented Apr 6, 2016 at 6: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. css-tricks.com/dangers-stopping-event-propagation — Ray
– Ray, Commented Apr 6, 2016 at 6:17

Alok Patel · Accepted Answer · 2016-05-25 04:31:30Z

3

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

answered May 25, 2016 at 4:31

Alok Patel

8,0726 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zara.zhao · Accepted Answer · 2016-04-06 06:53:39Z

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 6, 2016 at 6:53

zara.zhao

113 bronze badges

1 Comment

Alok Patel Over a year ago

Yeah, indeed! It has to do with input focus!

amrit sandhu · Accepted Answer · 2016-04-06 06:03:58Z

0

try this.....

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

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

answered Apr 6, 2016 at 6:03

amrit sandhu

1304 bronze badges

Comments

nisar · Accepted Answer · 2016-04-06 06:28:36Z

0

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

edited Apr 6, 2016 at 6:28

answered Apr 6, 2016 at 6:01

nisar

1,0752 gold badges11 silver badges26 bronze badges

1 Comment

Ray Over a year ago

You forgot to add e as the parameter.

Collectives™ on Stack Overflow

jQuery click event works only after second click

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related