Bootstrap下拉单击事件在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  

我有一段代码，一个Bootstrap下拉列表，单击它即可填充。但是，#bookmarks元素上的任何其他后续单击事件将不起作用。我尝试分配如下事件：$(document).on('click', '#bookmarks', function() ...)，同样的事情……它甚至会完全停止工作。我究竟做错了什么？我需要它不断使click事件更新到必要的下拉列表。

有什么想法吗？

注意：@LOOP实体包含AJAX假定完成后将接收的视图数据。确认可以正常工作，但只能正常工作一次。