CODEWITHSUNDEEP
javascriptjqueryhtmljquery-click-event
Alok Patel
Alok Patel

Reputation: 8012

jQuery click event works only after second click

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.

Upvotes: 3

Views: 6943

Answers (4)

Alok Patel
Alok Patel

Reputation: 8012

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

Upvotes: 3

zara.zhao
zara.zhao

Reputation: 11

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/

Upvotes: 1

nisar
nisar

Reputation: 1065

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

Upvotes: 0

amrit sandhu
amrit sandhu

Reputation: 130

try this.....

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

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

Upvotes: 0

Related Questions