动态生成的search输入框点击清除按钮无法触发search事件如何解决？

问题核心是：直接绑定事件的方式只能作用于页面初始化时已存在的DOM元素，动态生成的元素不会自动继承之前绑定的事件。需要用事件委托来处理动态元素的事件绑定。

解决方案代码修改 #

把原来的事件绑定代码替换为事件委托形式：

// 使用事件委托，绑定到静态父元素（比如document或更具体的容器）
$(document).on('search', 'input[type=search]', function () {
    console.log('X clicked');            
});

如果想更精准（推荐，减少事件冒泡范围），可以绑定到页面初始就存在的容器，比如#search_group和#append_here：

$('#search_group, #append_here').on('search', 'input[type=search]', function () {
    console.log('X clicked');            
});

额外提示 #

你的代码中存在重复ID的问题：动态生成的元素使用了和静态元素相同的search_group和search_text ID，这不符合HTML规范（ID必须唯一）。建议修改为类名或者动态生成唯一ID，比如：

// 动态生成唯一ID的示例
let searchId = 'search_text_' + Date.now();
var new_search_element = `<div class="search_group">
            <div class="input-group">
                <input type="search" class="form-control" id="${searchId}"/>
            </div>
        </div>`;

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