Событие щелчка раскрывающегося меню начальной загрузки перестает работать после вызова AJAX

Question

<li class="nav-item mx-2 dropdown" id="bookmarks">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="fas fa-bookmark fa-lg fa-fw"></i>
</a>
<div class="dropdown-menu bookmarks"><a class="dropdown-item" href="http://localhost:8080/articles/foobar/barfoo">
        <i class="far fa-file-alt fa-fw fa-lg"></i>
        Foobar
    </a>
    <a class="dropdown-item" href="http://localhost:8080/articles/foobar/barfoo">
        <i class="far fa-file-alt fa-fw fa-lg"></i>
        Foobar
    </a>
    <a class="dropdown-item" href="http://localhost:8080/articles/foobar/barfoo">
        <i class="far fa-file-alt fa-fw fa-lg"></i>
        Barfoo
    </a>
</div>
</li>  

$('#bookmarks').on('click', function(e) {
    console.log('WORKED ONCE?');
    $.get('/foo/bar/bookmarks/', function(data) {
        $('#bookmarks .bookmarks').html(data);
    });
});  


@LOOP <a class="dropdown-item" href="{!! url($bookmark->url) !!}">FOOBAR</a> @ENDLOOP  

У меня есть этот фрагмент кода, раскрывающийся список начальной загрузки, который заполняется нажатием на него.Однако любые другие последующие события нажатия на элементе #bookmarks не будут работать.Я попытался назначить событие следующим образом: $(document).on('click', '#bookmarks', function() ...), то же самое ... оно перестало бы работать даже ровно.Что я делаю неправильно?Мне нужно, чтобы это событие постоянно отображалось, чтобы при необходимости обновлять выпадающий список.

Есть мысли?

ПРИМЕЧАНИЕ. Сущность @LOOP содержит данные представления, которые AJAX должен получить после завершения.Подтверждено, что он работает, но работает только один раз.