使用jQuery克隆搜索框后AJAX请求不生效该如何解决

问题根因 #

• HTML ID全局唯一：你克隆输入框后仍然设置id="search"，导致页面存在重复ID，选择器逻辑异常
• 事件仅绑定到静态元素：初始的$("#search").keyup()只会给页面加载时已存在的第一个搜索框绑定事件，后续动态生成的克隆元素不会自动绑定该事件
• 选择器书写错误：AJAX成功回调里的$(".#output")多了多余的类选择符.，正确ID选择器应为$("#output")

修复方案 #

采用事件委托实现动态元素的事件绑定，同时修正克隆逻辑和选择器错误，不需要每次新增元素后单独绑定事件，代码如下：

function add(){
    // 克隆首个搜索框，清空输入值，移除ID避免重复，追加到容器
    $(".search:first").clone().val("").removeAttr("id").appendTo(".cont");
}   

// 事件绑定到固定存在的父容器.cont，匹配所有.search类的输入框，动态新增的元素也会生效
$(".cont").on("keyup", ".search", function(){
    $.ajax({
        type:'POST',
        url:'search.php',
        data:{
          name: $(this).val()
        },
        success:function(data){
           $("#output").html(data);
        }
    });
});

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