jQuery click 事件仅在第二次点击后有效

Question

我已经将点击事件绑定到一个名为“.reportfile”的 class，如下所示。

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

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

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

现在，当我尝试单击动态生成的 LI 元素时，它仅在第二次单击时有效。

https://jsfiddle.net/mt7km8bz/

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

Answer 1

将此更改为 keypress ，它正在工作。我签到 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 2

试试这个......

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

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

Answer 3

我猜 jQuery click 事件只有在第二次点击后才起作用，因为 input.So 我做了一个愚蠢的方法，即使用计时器触发 LostFocus 事件。

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

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

Answer 4

问题是焦点在输入框上，第一次点击输入框仍然有焦点，所以列表上的点击事件不会触发。

所以在第一次点击时它失去了对输入框的关注，并且在第二次点击事件被触发。

对以下内容的更改对我有用。

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

jQuery click 事件仅在第二次点击后有效

jQuery click event works only after second click

javascript

jquery

html

jquery-click-event