jQuery click事件仅在第二次单击后才起作用

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

我将click事件绑定到名为“.reportfile”的类,如下所示。

$('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,

现在我用“.reportfile”类动态创建LI元素。喜欢这个,

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.

现在,当我尝试单击动态生成的LI元素时,它仅适用于第二次单击。

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.

UL顶部有输入框以过滤列表。这是我动态创建新LI的地方。必须单击已过滤列表中的LI元素两次才能使其正常工作。

4 个解决方案

#1

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

#2

try this.....

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

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

#3

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

将此更改为按键,其工作正常。我小提琴。的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);
        }
    });
});

#4

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.

我猜jQuery点击事件仅在第二次点击后才起作用,因为输入的焦点。所以我做了一个傻瓜式的方式,即使用计时器触发LostFocus事件。

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

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

这是代码... https://jsfiddle.net/2hkn2jpk/

#1