jQuery无法检测动态追加HTML元素的点击事件问题

我做了一个带实时搜索功能的文本框，静态HTML里的元素点击能正常输出日志，但通过搜索框把完全相同结构的代码追加到#tag-result后，新生成的元素点击功能就失效了。其他场景用同类代码都正常，唯独这里出问题——甚至把代码里的"tag"相关替换成"user"就能正常运行。

// 原帖漏写了.blur事件...
$('#txttagSearch').blur(function() {
    $(this).val('');
    $('#tag-search-results').hide();
})

// 把上面代码换成下面这段后
$(document).mouseup(function(e) {
    $('#txtTagSearch').val('');
    $('#tag-search-results').hide();
})

// 现在点击能被识别，搜索结果也能正常隐藏了。

<div class="form-floating">
    <input type="text" class="form-control" id="txtTagSearch" name="txtTagSearch" placeholder="Search to Add Tags" autocomplete="off">
    <label for="txtTagSearch">Search to Add Tags</label>
</div>
<div class="tag-wrapper">
    <div id="tag-search-results">
        <ul id="tag-result">
            <li class="tag-search-click 5">leather</li> <!-- 这个点击有效 -->
        </ul>
    </div>
    <div class="row gx-2 mt-3">
        <div class="col" id="tag-display">
            <div class="tag" style="background-color: #000;">sunglasses</div>
        </div>
    </div>
</div>

$('#txtTagSearch').keyup(function() {
    liveSearchTag($(this).val())
    $('#tag-search-results').show();
})

$('#model-tag-results #tag-result').mousedown(function(e) {
    e.preventDefault();
})

function liveSearchTag(keyword) {
    $.ajax({
        url: 'server/tag-search.php',
        type: 'GET',
        data: { keyword: keyword },
        dataType: 'json',
        success: function(result) {
            const divTagResult = $('#tag-search-results #tag-result');
            let html = '';
            if (result !== null) {
                if (result.length > 0) {
                    $.each(result, function(index, item) {
                        html += '<li class="tag-search-click ' + item['id'] + '">' + item['tag'] + '</li>' // 这些生成的li点击没反应？
                    })
                } else {
                    let html = '<li style="padding: 10px;">NO RESULT FOUND</li>';
                }
            } else {
                let html = '<li style="padding: 10px;">NO RESULT FOUND</li>';
            }
            divTagResult.html(html);
        }
    })
}

$('#tag-search-results').on('click','.tag-search-click',function() {
    console.log('test');
    var tagID = $(this).attr('class').replace('tag-search-click ','');

    $.ajax({
        url: 'server/tag-result.php',
        type: 'GET',
        data: { code: tagID },
        dataType: 'json',
        success: function(data) {
            $('#tag-display').append('test');
            $('#txtTagSearch').val('');
            $('#txtTagSearch').blur();
            $('#tag-search-results').hide();
        }
    })
})

我试过几种点击绑定写法，都无法触发新生成元素的点击事件：

$('#tag-search-results').on('click','.tag-search-click',function() {
$(document).on('click','.tag-search-click',function() {
$('.tag-search-click').click(function() {

内容的提问来源于stack exchange，提问作者Joshua