javascript - jQuery 单击事件仅在第二次单击后才有效

Question

我已将点击事件绑定(bind)到名为“.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
});