问对于动态生成的搜索输入元素，单击小的"x“以清除使用.on(' search '，function ()

EN

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="search_group" style="">
        <div class="input-group">
            <input type="search" class="form-control" id="search_text"/>
        </div>
    </div>
    
    <h5 id="add_search" style="cursor:pointer">Dynamically ad Search Box</h5>
    
    <p id="append_here"></p>
    
    <script type="text/javascript">
        
        //this works on the static search box, but not on the dynamic search box
        $('input[type=search]').on('search', function () {
            console.log('X clicked');            
        });   
        
        //add search box dynamically
        $( "#add_search" ).on( "click", function() {
           var new_search_element = `<div id="search_group">
                        <div class="input-group">
                            <input type="search" class="form-control" id="search_text"/>
                        </div>
                    </div>`;  
            $("#append_here").empty().append(new_search_element);
        });   
    </script    
</body>
</html>