jQuery绑定onclick事件至<a>标签失效，寻求解决方法

核心问题1：HTML字符转义错误 #

你在prepend和append中使用了<这类双重转义的字符，最终插入页面的是纯文本形式的HTML代码，而非可交互的DOM元素。浏览器不会将这些字符串解析成真正的<a>标签，自然onclick事件无法触发。

核心问题2：引号嵌套语法错误 #

即便转义正确，onclick='alert('hi')'里的单引号会发生冲突——浏览器会把第一个'和alert(后的'配对，导致语法断裂，事件无法正常执行。

修复后的代码 #

直接使用原生HTML字符串（无需双重转义），同时调整引号避免冲突；更推荐用jQuery事件绑定方式（比内联onclick更可靠，尤其适配动态添加的元素）：

$(document).ready(function(){
    const requiredBy = true;
    if(requiredBy){
        let banner = $(".bannerLink");
        if(banner.length === 0){
            const pdpHead = $("[replaceclass='PDPHeadReplace']");
            if(pdpHead.length !== 0){
                // 直接使用HTML字符串，不要双重转义
                pdpHead.prepend('<div class="bannerLink"></div>');
                banner = pdpHead.find(".bannerLink");
            }
        }
        if(banner.length !== 0){
            // 方法1：调整引号，用转义单引号包裹alert内容
            banner.append('<a href="#" onclick="alert(\'hi\')"><img src="https://test.com" style="margin-top:5px;" ></a>');
            
            // 方法2：更推荐的jQuery事件绑定（规避内联事件的各类问题）
            // const $link = $('<a href="#"><img src="https://test.com" style="margin-top:5px;" ></a>');
            // $link.on('click', function(e){
            //     e.preventDefault(); // 阻止<a>默认跳转行为
            //     alert('hi');
            // });
            // banner.append($link);
            
            $('.helloDiv').css({ 'display' : 'block', 'padding-top': '1rem'});
        }
    }
});

额外说明 #

• 用let/const替代var，避免变量提升带来的潜在问题
• 若使用方法2的事件绑定，记得添加e.preventDefault()，防止<a href="#">默认跳转到页面顶部
• 动态添加的元素，直接绑定事件或使用事件委托，比内联onclick更易维护

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