电商网站AJAX实时搜索建议点击事件失效问题求助

我在电商网站用AJAX实现了数据库实时搜索功能，输入框有内容时页面会加载出搜索建议。但点击这些动态生成的建议时，无法触发绑定的.clicked点击事件——普通静态div添加这个类却能正常触发点击。附上我的jQuery代码：

$('.clicked').click(function() {
    console.log($("#input_value").val());
    
});

var x;
var value = $("#input_value").val();
$('.clicked').click(function() {
$.ajax({
    type:'GET',
//     // url: 'test.php?name=' + $("#testo").val(),
    data: { name : value },
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    success: function()
    {
        window.location.href = 'un_produit.php?id=' + $("#input_value").val();
    
    }
});

你当前用的$('.clicked').click(...)属于直接事件绑定，只能给页面初始化时就已存在的DOM元素绑定事件。而搜索建议是AJAX请求后动态生成的新DOM节点，页面加载时这些元素根本不存在，所以绑定的事件无法作用到它们身上。

利用jQuery的事件委托机制，把事件绑定到页面加载时就存在的父容器上，通过事件冒泡处理动态添加的子元素事件。同时修正你代码里的两个问题：重复绑定事件、错误用输入框值作为跳转ID。

修改后的代码示例：

// 假设搜索建议的父容器是#suggestions-container（根据你实际DOM结构调整）
$('#suggestions-container').on('click', '.clicked', function() {
    // 从点击的建议项上获取对应ID（需给每个建议项添加data-id属性存储ID）
    var targetId = $(this).data('id');
    console.log(targetId);

    $.ajax({
        type: 'GET',
        data: { name: $("#input_value").val() },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success: function() {
            window.location.href = 'un_produit.php?id=' + targetId;
        }
    });
});

额外说明 #

1. 确保给每个动态生成的搜索建议项添加data-id="对应商品ID"属性，比如：

   <div class="clicked" data-id="123">商品A</div>
   

2. 替换代码里的#suggestions-container为你实际存放搜索建议的父元素选择器，只要这个父元素在页面加载时就存在即可。

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