javascript - Jquery 不会在第一次点击时隐藏元素

Question

我有一个奇怪的问题，我有一个事件监听器

$(document).on('click', '.suggested-location-item', function(event) {
    event.preventDefault();
    $('#IDsuggestedLocationsList').html('');
    $('#IDlocationSuggestBox').hide();


});

因此，当单击 .suggested-location-item 一次(1 次)时，该元素不会消失，它只是闪烁得非常快，只有在第二次单击时它才会消失，但是如果我这样做 $('#IDlocationSuggestBox' ).remove();而不是 hide() ，它会在第一次单击时删除该元素，没有任何问题。在这里我将发布我的整个代码，因为也许其他一些代码会导致问题:

此代码生成元素:

$(document).on('propertychange change click keyup input paste', '#IDLocationSearchInput', function(event) {
    event.preventDefault();
    var searchTerm = $('#IDLocationSearchInput').val();
    $.ajax({
        url: IDurlToGetLocation,
        type: 'GET',
        data: {'location':searchTerm},
    })
    .done(function(data) {
        if (data.success == 0) {
            $('#IDlocationSuggestBox').hide();
            $('#IDsuggestedLocationsList').html('');
            if (data.message) {
                $('#IDlocationSuggestBox').show();
                $('#IDsuggestedLocationsList').html("<div class='list-group-item'>"+data.message+"</div>");
            }
        }else{
            $('#IDlocationSuggestBox').show();
            $('#IDsuggestedLocationsList').html('');

            $.each(data, function(index, val) {

                $('#IDsuggestedLocationsList').html($('#IDsuggestedLocationsList').html()+"<a href='' type='"+val.table_name+"' id='"+val.id+"' class='list-group-item suggested-location-item'>"+val.city_name+"</a>");
            });
        }


    });

});

这段代码应该删除该元素:

$(document).on('click', '.suggested-location-item', function(event) {
  event.preventDefault();
  $('#IDsuggestedLocationsList').html('');
  $('#IDlocationSuggestBox').hide();


});

请帮忙，这是一个奇怪的问题/？

谢谢。

Answer 1

我发现一个拼写错误，我应该在我的上使用点击输入绑定(bind)

$(document).on('propertychange 更改点击键盘输入粘贴', '#IDLocationSearchInput', function(event){...});

事件监听器