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

现在我用“.reportfile”类动态创建LI元素。 像这样，

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

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

尝试这个.....

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

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

Answer 4

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

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

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