Jquery doesn't hide an element from the first click

Question

I have a strange problem, I have an event listener

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


});

so when the .suggested-location-item is clicked once (1 time), the element does not disappears it just blinks very fast, it disappears only on second click however if I do $('#IDlocationSuggestBox').remove(); instead of hide() it removes the element on the first click with no problems. Here I'll post my entire code because maybe some other code causes the problem:

this code generates the element:

$(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>");
            });
        }


    });

});

And this code is suppose to remove the element :

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


});

please help, that's a strange issue /?

Thank You.

Answer 1

I found a typo , I should have used click input bind on my

$(document).on('propertychange change click keyup input paste', '#IDLocationSearchInput', function(event){...});

event listener