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.

Answers:

Answer

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

try this.....

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

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

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

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/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.