Событие jQuery click работает только после второго клика

Question

Я щелкнул событие привязки к классу с именем ".reportfile" следующим образом.

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

Сейчас я динамически создаю элемент LI с помощью класса.reportfile. Как это,

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

Теперь, когда я пытаюсь нажать на динамически сгенерированные элементы LI, он работает только при втором щелчке.

https://jsfiddle.net/mt7km8bz/

В верхней части UL есть поле ввода для фильтрации списка. Здесь я создаю новую LI динамически. Элемент LI в отфильтрованном списке нужно дважды щелкнуть, чтобы заставить его работать.

Answer 1

Проблема заключалась в фокусировке на поле ввода, в поле ввода первого щелчка все еще есть фокус, поэтому событие щелчка в списке не срабатывает.

Таким образом, при первом щелчке он теряет фокус на поле ввода, а при втором щелчке запускается событие.

Изменения в следующих работали для меня.

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

Answer 2

Я предполагаю, что событие нажатия jQuery работает только после второго щелчка, потому что фокус ввода. Так что я сделал дурацкий способ, который вызывает событие LostFocus, используя таймер.

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

Это код... https://jsfiddle.net/2hkn2jpk/

Answer 3

Попробуй это.....

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

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

Answer 4

Измените это на нажатие клавиши, его работает. Я проверял в скрипке. 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);
        }
    });
});