动态生成音乐条目绑定的Ajax请求未执行，求排查原因

核心问题分析 #

1. 事件绑定逻辑错误
   每次执行search函数时，都会给所有.songitem元素重复绑定click事件，不仅会导致旧条目触发多次请求，而且这种直接绑定方式扩展性差，后续新增的动态条目若未重新绑定就无法触发事件。

2. 请求URL存在无效空格
   获取播放地址的请求中，id=${songId} & level=exhigh里的${songId}后多了一个空格，会导致服务器无法正确解析id参数，请求大概率直接失败，回调函数自然无法执行。

3. 未清理旧搜索结果
   每次搜索都是向.searchlist追加新条目，导致列表不断累积，旧条目重复绑定事件，严重干扰正常交互。

修正后的代码 #

// 事件委托：绑定到静态父元素，监听所有动态生成的.songitem点击
$('.searchlist').on('click', '.songitem', function(){
    console.log('!!')
    let songId = $(this).attr('data-songid');
    console.log(songId)
    // 移除songId后的空格，修正URL参数格式
    $.get(`http://localhost:3000/song/url/v1?id=${songId}&level=exhigh`,function(data,status){
        console.log(data)
        audio.src=data.url;
        audio.play();
        console.log('!')
    })
});

function search(keywords) {
    // 清空旧搜索结果，避免重复条目和重复事件绑定
    $('.searchlist').empty();
    $.get(`http://localhost:3000/search?keywords=${keywords}`, function (data, status) {
        console.log(data);
        $('.searchlist').append(
            `
            <div class="songitem" data-songid="${data.result.songs[0].id}" data-albumimg="${data.result.songs[0].album.picId}">
                <div class="songname">${data.result.songs[0].name}</div>
                <div class="singername">${data.result.songs[0].artists[0].name}</div>
                <div class="album">${data.result.songs[0].album.name}</div>            
            </div>
            `
        )
    })
}

$('.search').on('keypress', function (e) {
    if (e.key === 'Enter') {
        search($('.search').val());
    }
});

关键修改说明 #

• 事件委托：将click事件绑定到静态的.searchlist元素上，通过第二个参数指定监听目标为.songitem，所有动态生成的条目点击都会触发事件，无需重复执行绑定逻辑。
• 修正URL参数：移除${songId}后的空格，确保服务器能正确识别id参数。
• 清空旧结果：每次搜索前调用empty()清理列表，避免旧内容和重复事件绑定的干扰。

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