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事件。

nested json

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

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

4 个答案: